Angular2の括弧、括弧、アスタリスクの違いは何ですか？

151

私はAngularのウェブサイトでAngular 1から2のクイックリファレンスを読んでいますが、完全に理解できなかったのは、これらの特殊文字の違いです。たとえば、アスタリスクを使用するもの：

<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}}"アンギュラ1に？

最後に、括弧は次のとおりです。

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

これらはDOMイベントにのみ使用されますか、(load)="someFn()"またはなどの他のイベントを使用でき(mouseenter)="someFn()"ますか？

本当の質問は、これらの記号はAngular 2で特別な意味を持っているのでしょうか、それぞれをいつ使用するのかを知る最も簡単な方法は何ですか？ありがとう!!

angular

— デビッド・メザ
ソース

回答:

153

詳細については、こちらをご覧ください：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ロール属性にバインドします（まだ使用できません）
prop="{{value}}"値をプロパティにバインドします。値は文字列化されます（別名補間）
(event)="expr"イベントハンドラを@Output()またはDOMイベントにバインドします
#varまたは#varコンテキストに応じて異なる機能を持っています
- ~~*ngFor="#x in y;#i=index"するためのスコープ変数反復が作成される~~
  （* ngFor =に変更され、このbeta.17で「YにおけるせX、iはインデックスを=う」 `）
- DOM要素で<div #mydiv>は、要素への参照
- Angularコンポーネントでは、コンポーネントへの参照
- Angularコンポーネントであるか、AngularディレクティブexportAs:"ngForm"が定義され#myVar="ngForm"ている要素で、このコンポーネントまたはディレクティブへの参照を作成します。

— ギュンター・ツェヒバウアー
ソース

またはbind-のために[]とon-のために()または<template [ngFor]>のために*ngFor。

— ギュンターZöchbauer

[（ngModel）]とはどういう意味ですか？つまり、角括弧内の括弧です

— ウスマン2017

双方向での（もbox6では「バナナと呼ばれる）。これは、組み合わせ（または短い形式）のバインディング[ngModel]="foo" (ngModelChange)="foo = $event"最初の部分が更新どこngModel財産（@Input() ngModel;のNgModelディレクティブ) when foo`の変化と第二の部分の更新（の）ディレクティブをイベントを発する。フォーム要素とコンポーネントにバインド値に使用されている。いずれにも使用することができます組み合わせ、また、独自のコンポーネント。foo@Output() ngModelChange;NgModelNgModel[(bar)]@Input() bar; @Output() barChange;

— ギュンターZöchbauer

GünterZöchbauer@の違いは何である[prop]="value"とprop="{{value}}"構文よりも何か他のものは？どちらも@Input() value;コンポーネントに値を渡すことができます。

— DiPix 2018年

@DiPix [prop]="value"は任意のタイプの値を割り当てることができ、prop="{{value}}"常にvalue割り当て前に文字列化するため、オブジェクトを渡すことはできません。

— ギュンターZöchbauer

[]- データソースからビューターゲットへの一方向のプロパティバインディング。例えば

{{expression}}
[target]="expression"
bind-target="expression"

代わりにbind-を使用できます []

()-> ビューターゲットからデータソースへの一方向のイベントバインディング

(target)="statement"
on-target="statement"

（）の代わりにon-を使用できます

[()]-ボックス内の双方向バインディングバナナ

[(target)]="expression"
bindon-target="expression"

代わりにbindon-を使用できます [()]

— シャジンチャンドラン
ソース

すでに述べたように、Angularのドキュメント、特に「ヒーローチュートリアル」では、これについてさらに詳しく説明しています。ご覧になりたい方はこちらへ。

括弧は、例のようなボタンのクリックなど、作業中の要素のイベントです。これは、その要素のmousedown、keyup、onselect、または任意のアクション/イベントである場合もあります。その後にあるの=は、呼び出すメソッドの名前です（呼び出しには括弧を使用します）。そのメソッドはコンポーネントクラスで定義する必要があります。

<element (event)="method()"></element>

ブラケットは逆の働きをします。彼らはあなたのクラスからデータを取得することです-イベントを送信していた括弧の反対-ので、一般的な例は次のようなスタイルの使用法です：

<element [ngStyle]="{display:someClassVariable}">

見る？モデル/クラスに基づいて要素にスタイルを与えています。

これのためにあなたは使うことができたでしょう...

<element style="display:{{ModelVariable}};">

次のように画面に印刷するものには、二重の中括弧を使用することをお勧めします。

<h1>{{Title}}</h1>

何を使用しても、一貫性があれば、コードが読みやすくなります。

最後に、あなたの*質問にとって、それはより長い説明ですが、それは非常に重要です：それは、そうでなければ動作させるためにしなければならないいくつかのメソッドの実装を抽象化しますngFor。

重要な更新の 1つは、ではngForハッシュを使用しなくなることです。let代わりに次のように使用する必要があります。

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

最後に言及する価値があることの1つは、上記のすべてがコンポーネントにも当てはまることです。たとえば、コンポーネントでメソッドを作成すると、次のように呼び出されます()。

<my-owncomponent 
    (onSearched)="MethodToCall()" 
    [MyInputData]="SearchParamsArray"></my-owncomponent>

— ゲイリー
ソース