angle2のコンポーネントに文字列値を渡す方法

86

angle2のコンポーネントに文字列値を渡したいのですが、デフォルトのバインディングでは機能しません。私はこれに似た何かを考えています：

<component [inputField]="string"></component>

残念ながら、割り当ての右側では式のみが許可されています。これを行う方法はありますか？

angular angular2-template

— アンドラス・ハトヴァニ
ソース

174

文字列リテラルは、さまざまな方法で渡すことができます。

<component inputField="string"></component>
<component [inputField]="'string'"></component>
<component inputField="{{'string'}}"></component>

— GünterZöchbauer
ソース

1

それらの間に違いはありますか？たとえば、Angularは最後の2つのケースで「バインディング」を作成しますか、それとも十分に賢いですか？

— アレクサンダーアバクモフ2017年

Angularは十分に賢いです。最初のものだけがDOMに表示されます。

— ギュンターZöchbauer

1

ありがとう。ネストされた引用符なしで渡していて、値をNaNとして返していました： <component [inputField]='string'></component>

— Eric Soyke 2018

技術的には、オプション1と3はお勧めしません。これには、コンポーネント要素の属性と値、およびそれらの値を利用する可能性のあるコンポーネント内の要素が文字通り含まれます。例でid="example-id"は、必要な正しい文字列を渡しますが、同じid属性を持つ2つの要素があります。...賢く、このアプローチを使用してください

— mrtpain

50

文字列を引用符で囲むことにより、文字列を渡すことができます

<component [inputField]="'string'"></component>

— エリック・マルティネス
ソース

3

文字列リテラルに一重引用符（および場合によっては他の特殊なHTML文字）を含めるには、最初のオプションが機能しますが、一重引用符を使用してリテラルをラップするオプションは解析エラーで失敗します。例えば：

<component inputField="John&#39;s Value"></component>

「ジョンズバリュー」を正しく出力します。

— グレン
ソース