[Angular] Angular模板总结快捷表

2 年 ago

2 minutes

来源：Angular – 速查表

阅读这个备忘录的方法

テンプレート出力解説テンプレートの書き方です。コンポーネント適用後の出力例です。解説です。

前提 – Chinese paraphrase: 条件。

出力例是以以下组件类为前提的。

export class MyCmpComponent {
  firstName: string     = "Jane";
  myAriaRole: string    = "banner";
  isDelightful: boolean = true;
  mySize: int           = 100;
  ponyName: string      = "Seabiscuit";
  employer: Employer;

  readRainbow($event: any): void { /* (snip) */ }
}

Angular模板语法

テンプレート出力解説<input [value]="firstName"><input value="Jane">valueプロパティに、firstName式の評価結果をバインドします。<div [attr.role]="myAriaRole"><div role="banner">role属性に、myAriaRole式の評価結果をバインドします。<div [class.extra-sparkle]="isDelightful"><div class="extra-sparkle">extra-sparcleCSSクラスを付与するかどうかを、isDelightful式の評価結果が真値になるかどうかにバインドします。<div [style.width.px]="mySize"><div style="width:100px">widthプロパティにmySize式の評価結果をバインドします。単位pxはオプションです。<button (click)="readRainbow($event)"><button onClick="readRainbow($event)">クリック時にreadRainbowメソッドを呼び出します。<div title="Hello {{ponyName}}"><div title="Hello Seabuscuit">プロパティに補完文字列をバインドします。 <div [title]="'Hello ' + ponyName"> と一緒です。<p>Hello {{ponyName}}</p><p>Hello Seabuscuit</p>コンテンツを補完文字列にバインドします。<my-cmp [(title)]="name">
双方向（ツーウェイ）データバインディングです。 <my-cmp [title]="name" (titleChange)="name=$event"> と同じです。<video #movieplayer ...><button (click)="movieplayer.play()"></video>
video要素を格納したmovieplayerというローカル変数を生成します。ローカル変数は、同じテンプレート中のデータバインディングやイベントバインディング式で使用できます。<p *myUnless="myExpression">...</p>
<ng-template [myUnless]="myExpression"><p>...</p></ng-template>と同じです。<p>Card No.: {{cardNumber ｜ myCardNumberFormatter}}</p>¹
myCardNumberFormatterフィルタを通して出力します。<p>Employer: {{employer?.companyName}}</p>
employerがundefinedでもエラーにならないようにします。

因为不知道Markdown的转义字符，所以用全角的管道符进行了编写。