1. ホーム
  2. angular

[解決済み] Angular2の括弧、括弧、アスタリスクの違いは何ですか?

2022-04-17 09:02:50

質問

のAngular 1 to 2クイックリファレンスを読んでいます。 Angularウェブサイト この特殊文字の違いについて、私は完全に理解していませんでした。例えば、アスタリスクを使用するものがあります。

<tr *ngFor="#movie of movies">
   <td>{{movie.title}}</td>
</tr>

ここで理解したのは、ハッシュ(#)記号で定義された movie をローカルテンプレート変数として使用することができますが、その前のアスタリスクは何を意味するのでしょうか? ngFor の意味は?そして、それは必要なのでしょうか?

次に、括弧を使った例です。

<a [routerLink]="['Movies']">Movies</a>

を括弧で囲むのはなんとなくわかるのですが routerLink は、そのHTML属性/Angularディレクティブにバインドされます。これは、Angularが式を評価するためのポインタということでしょうか?例えば [id]="movieId" は、次のものと同等です。 id="movie-{{movieId}}" Angular 1では?

最後に、括弧です。

<button (click)="toggleImage($event)">

これらはDOMイベントのみに使用され、他のイベント、例えば (load)="someFn()" または (mouseenter)="someFn()" ?

本当の疑問は、これらの記号はAngular 2で特別な意味を持つのか、そしてそれを知る最も簡単な方法は何かということです。 を使用する必要があります。 ? ありがとうございます!

解決方法は?

詳細はこちらでご確認ください。 https://angular.io/docs/ts/latest/guide/template-syntax.html

  • directiveName - は、構造ディレクティブのショートハンド形式で、ロングフォルムは <template> タグを使用します。短い形式は、適用される要素を暗黙のうちに <template> .

  • [prop]="value" はプロパティへのオブジェクトバインディング用 ( @Input() Angularコンポーネントやディレクティブ、またはDOM要素のプロパティ)。

    特殊な形式があります。

    • [class.className] は、CSS クラスにバインドして有効/無効を切り替えます。
    • [style.stylePropertyName] は、スタイルプロパティにバインドされます。
    • [style.stylePropertyName.px] は、プリセットユニットを持つスタイルプロパティにバインドされます。
    • [attr.attrName] 値を属性にバインドする(DOMでは見えるが、プロパティは見えない)。
    • [role.roleName] はARIAのrole属性にバインドする(まだ利用できない)
  • prop="{{value}}" はプロパティに値をバインドします。値は文字列化される(別名、補間)

  • (event)="expr" は、イベントハンドラを @Output() またはDOMイベント

  • #var または #var は、コンテキストによって異なる機能を持ちます

    • <ストライク での *ngFor="#x in y;#i=index" 反復処理のためのスコープ変数が作成されます

      (beta.17では *ngFor="let x in y; let i=index"` に変更されています)
    • DOM要素について <div #mydiv> 要素への参照
    • Angularコンポーネントの場合 コンポーネントへの参照
    • Angular コンポーネント、または Angular ディレクティブを持つ要素で exportAs:"ngForm" が定義されています。 #myVar="ngForm" は、このコンポーネントやディレクティブへの参照を作成します。