首先学习的是 Angular

1 年 ago

宇, 华

2 minutes

基本指令

// node.jsのバージョン確認
node -v

// Angular CLIインストール
npm install -g @angular/cli

// Angular Version確認
ng version

// Angular のバージョンアップ
npm uninstall -g @angular/cli
npm cache verify // キャッシュの整合性確認
npm cache clean // キャッシュ削除
npm install -g @angular/cli

//
// アプリケーションのAngularバージョンアップ
// 【オプション】 --allow-dirty --force
// 【メモ】バージョンは一気に上げることはできず、１つずつ上げる必要があるようです。
//
ng update @angular/core@バージョン @angular/cli@バージョン

// Angular アプリケーション
ng new アプリ名

// Angularのバージョン指定する場合
npx @angular/cli@バージョン番号 new プロジェクト名

cd アプリ名

// アプリ起動
ng serve

// コンポーネント作成
ng generate component コンポーネント名

// サービス作成
ng generate service サービス名

HTML的输出方法

1. 胡须句式

能做的事情 zuò de shì

通貨フォーマット

HTML文件的描述。

<p>金額：{{ 1000 * 1.1 | currency: "JYP" }}</p>

HTML输出结果

<p>金額：￥1,000</p>

2. 特征

设定属性值

[属性]="プロパティ"

事件属性设置

在事件中写下排除了 JavaScript 事件的 “on” 的字符串。
例如：点击、改变、失焦、按键按下、按键按下、按键松开等。

(イベント)="メソッド"

属性值参照

<input type="text" #price (blur)="check(price.value)" />

price.value は「document.getElementById(‘price’).value」と同じ意味

样式绑定

[style.CSSプロパティ]="値"

CSS属性涵盖了诸如color和font-size等内容。

<p [style.color]="'#ff0000'" [style.font-size.pt]="36">こんにちは。</p>

文字列需要用单引号括起来。

属性指令：ngClass, ngStyle

[ngClass]="プロパティ|オブジェクト"
[ngStyle]="プロパティ|オブジェクト"

组件CSS文件

.l { font-size: 36pt; }
.b { font-weight: bold; }
.c { color: #f00; }

這個元件的ts檔案

myClass={
  'l': false,
  'b': true,
  'c': true
};
myStyle={
  'border-style': 'double',
  'border-color': 'blue'
}

组件HTML文件 HTML

<p [ngClass]="myClass">まいど</p>
<p [ngStyle]="myStyle">おおきに</p>

输出结果

「おおきに」は、青い二重線で囲まれている

指令结构：条件表达

当条件为真时

*ngIf="条件"

*ngFor循环

*ngFor="let 変数 of 配列; index as 変数"

在「*ngFor」指令中除了「index」以外，还有其他本地变量可用，如「count, first, last, even, odd」。

[ngSwitch]、ngSwitchCase、ngSwitchDefault

[ngSwitch]="プロパティ"
*ngSwitchCase="値"
*ngSwitchDefault

<div [ngSwitch]="greetingTime">
  <p *ngSwitchCase="'morning'">おはようございます。</p>
  <p *ngSwitchCase="'noon'">おはようございます。</p>
  <p *ngSwitchCase="'afternoon'">おはようございます。</p>
  <p *ngSwitchDefault>おはこんばんちは。</p>
</div>

在使用字符串时，需要用单引号括起来。

组件启动设置

将 app.module.ts 中的 bootstrap 导入的组件替换

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { SampleComponent } from './sample/sample.component';

@NgModule({
  declarations: [
    AppComponent,
    SampleComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [SampleComponent]
})
export class AppModule { }

2. 修改 index.html 文件中的组件标签.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-sample></app-sample>
</body>
</html>

有关文章

Angular 次に覚えること

以下是参考资料的中文释义：

npx を利用して特定バージョンの Angular プロジェクトを作成する