角2 101：変数を定義して使用する

Question

私がしようとしているのは、角2の構文を頭に入れようとすることです。私が見つけた例は、さまざまな方法を使っているようです。 FOOで

ルック：

は、私は、私が使用したいすべての単一の変数を設定する方法このですか？

構文を使用して定義し、その型を指定しますか？ その後、私はこれを参照してください。

export class SwitchClientComponent implements OnInit { 
    filterString: string = ''; 
    foo: string =''; 


    ngOnInit() { 

     this.foo = localStorage.getItem('bar') || '!'; 
    } 

。

<span>[{{foo}}]</span> 

Answer 1

それは角2つのドキュメントを参照してください、角括弧[]

<span>{{foo}}</span> 

Answer 2

せずにただ{{foo}}する必要があり、およそTemplate Variables

補間

セクションがあります

{{}}を使ってテンプレートに変数を表示する方法は、補間と呼ばれます。

<h3> 
    The title is: {{title}} 
    <img src="{{heroImageUrl}}" style="height:30px"> 
</h3> 

あなたは、静的なテキストにも属性でも、混合補間変数を使用することができます見ての通り

いくつかの属性を属性バインディングをバインドするために角度伝え角括弧で囲むことができ

値はその変数に渡されます。この場合、{{}}構文を使用する必要はありません。

<img [src]="heroImageUrl"> 

テンプレート式また

あなたが式を行うとしてpublicとして定義する必要があります関数であろう機能

もちろんgetVal()の

<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p> 

の戻り値を使用することができます成分。

ローカルテンプレート変数

また、（あなたはコンポーネントで定義されていない。この例heroでngForディレクティブ

<div *ngFor="let hero of heroes">{{hero.name}}</div> 

を使用して、たとえば、その場でテンプレート変数を定義することができる心に留めておきますthis.heroを呼び出すことによってコンポーネントクラス内では表示されません）、ngForブロックのコンテキストにローカルになります。意味：ngForを含むdivのすべての子要素。

代わりに、配列heoresが存在し、コンポーネントに公開されている必要があります。この場合には、{{}}構文を使用する必要はありません。これは、Angularがすでに変数を期待しているため、そこに配置するものを自動的に補間するためです。

<input #heroInput> {{heroInput.value}} 

この構文では、代わりにinput DOM要素への参照が提供されています。 heroInputはテンプレート内に表示されますが、コンポーネントの内部から直接アクセスすることはできません（ただし、コンポーネントから使用する方法はあります）。

さらにいくつかルールがありますが、その記事を読むことで、必要なすべての情報を得ることができます。

が定義コンポーネントパブリック変数

次のようになります上記のすべての例を使用するコンポーネント：我々は{{Varible名}} {{FOO}によるvariblesにアクセスanguarjsで

export class MyComponent { 
    title: string = 'My title'; 
    heroImageUrl: string ='http://www.myurl.com/img.jpg'; 
    heroes: any[] = [{name: 'a'}, {name: 'b'}]; 

    getVal() { 
     return 3; 
    } 
}