Angular2：コンポーネント内部のプロパティからのプロパティのバインド

Question

これらの2つのデータバインディングの違いについては混乱します。 <input type="text" value="{{stringInterpolation}}">

私はまた、別の方法でプロパティをバインドできることを読みました：私は入力の値属性にプロパティがあることバインド私のHTMLでstringInterpolation = This is string interpolation;

：私のコンポーネントで

私は、プロパティを持っています：<input type="text" [value]="stringInterpolation">テキストボックス内で同じ値を出力します。ここで

は、2つの入力の開発ツールから検査です：

<input _ngcontent-qdj-2="" type="text" ng-reflect-value="This is string interpolation">

と

<input _ngcontent-qdj-2="" type="text" ng-reflect-value="This is string interpolation">

彼らは両方とも同じです。

私の質問は：value="{{stringInterpolation}}は[value]="stringInterpolation"とどのように異なっていますか？

Answer 1

彼らは{{}}補間を評価し、DOMのvalueプロパティ内でその値を追加します

value={{stringInterpolation}} 

以上のプロパティ値

を評価する別の方法です。

ここで、[value]="stringInterpolation"構文的な砂糖&最初のものは少し冗長です。

角2では、プロパティ結合と呼ばれます。一般的に、コンポーネント間の通信目的で使用される傾向があります。また、動的プロパティをDOMプロパティに設定する場合もあります。意味を結合

プロパティは、現在のコンポーネントのコンテキスト（this）に対する評価を取得bindingプロパティで指定された[] &どのような値で名前ラップを属性。

これ以外に、コンポーネントHTMLをページにプロットすると、各DOMノードの動的クラスが角度_ngcontent-[someunique]-[somenumber]=""に追加され、コンポーネントのCSSを追加した場合は同じCSSルールが適用されます。この追加属性は、両方の場所（CSS &とノード）に追加され、コンポーネントCSSが現在ロードされているコンポーネント（コンポーネントメタデータで設定した内容によります）にのみ影響を与えるようにします。