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

次の例では、複数のラジオボタンに対してローカル変数#inputを指定します。 <tr>をクリックすると、ラジオボタンを選択したいと思います。Angular2ローカルテンプレート変数

次のコードはうまくいきますが、私はその理由を理解していません。

どのようにAngular2がローカル変数#inputを持っているときに参照している入力を「知る」ことができますか？

HTML

<tr *ngFor="let office of employee.offices" (click)="selectOffice(input)"> 
    <td class="select-office-radio"> 
     <input type="radio" name="office" #input /> 
    </td> 
    <td> 
     {{office.officeName}} 
    </td> 
    </tr>

selectOffice(input) { 
    input.checked = true; 
}

出典

2016-07-08 Weblurk

JSはselectOffice（ユーザ）であるべきではありませんか？ – Katana24

と私はそれは各オフィスがそれ自身のミニテンプレートを持っていて、* ngForによって作成された他のミニテンプレートを意識していないからだと信じているのは、 – Katana24

が更新されたということです。情報のためにokありがとう、これがどこかで文書化されるかどうか知っていますか？ – Weblurk

Bhushanのが言ったように、ngForは構造ディレクティブです。要するに、それはあなたのテンプレートに以下に脱糖することができます。テンプレートのローカル変数を定義する

<template ngFor let-office [ngForOf]="employee.offices"> 
    <tr (click)="selectOffice(input)"> 
    (...) 
    </tr> 
</template>

方法は以下の通りです：

プレフィックスlet-を追加します。たとえば、let-officeは、変数officeを定義します。
値を定義しないと、テンプレートコンテキストの$implicitエントリの値が使用されます。 ngForの場合、それは反復の現在の要素です。ここに：let-office。
値を指定することもできます。たとえば、ループのインデックスの変数を定義する場合は、let-i="index"です。この場合、変数iには対応する値が入ります。

変数は、接頭辞#で定義されます。それらは、それらが適用される要素がコンポーネントでない場合、DOM要素に対応します。それがコンポーネントの場合は、コンポーネントに対応します。例えば、<input #input/>のinputはElementRefに対応し、DOM要素はそのnativeElementプロパティを介してアクセスできます。

このような変数の値を指定することもできます。この場合、要素に適用される特定のディレクティブを選択できます。たとえば、<input #ctrl="ngModel" [(ngModel)]="val"/>です。値が指令宣言でexportAs属性内で指定されているものに対応する：selectUser（入力）とは対照的に

@Directive({ 
    selector: 'child-dir', 
    exportAs: 'child' 
}) 
class ChildDir { 
} 

@Component({ 
    selector: 'main', 
    template: `<child-dir #c="child"></child-dir>`, 
    directives: [ChildDir] 
}) 
class MainComponent { 
}

出典

2016-07-08 11:23:58