* ngIf内のローカル変数へのアクセス

Question

私はドロップダウン付きのprimeng（角2）ダイアログを持っています。ダイアログが表示されたときにドロップダウンにフォーカスを設定したいと思います。問題は私のdivが条件付きでレンダリングされているようです。

私のコード：このコードで

<p-dialog (onShow)="fe.applyFocus()"> 
    <div *ngIf="selectedItem"> 
    <button pButton type="button" (click)="fe.applyFocus()" label="Focus"></button> 
    <p-dropdown #fe id="reason" [options]="reasonSelects" [(ngModel)]="selectedReason" ></p-dropdown> 
    </div> 
</p-dialog> 

ボタンが正常に動作しますが、onShow（）（*ngIf divの外には）feが定義されていない私に語りました。

*ngIfのローカル変数にはどうすればアクセスできますか？

Answer 1

はい、これは本当の痛みです。残念ながら、* ngIfが動作する方法のために、内部にあるすべてのもの（それが入っているタグを含む）を完全にカプセル化します。

これは、ngIfでタグの上または内部で宣言されたものは、ngIfの外側では「可視」にならないことを意味します。

そして、最初の実行時にそれが存在しない場合がありますので、あなたも、単に、TSに@ViewChildを置くことができない...だから2つの既知の解決策は、この問題にあります...

A）あなたは、 @ViewChildrenを使用できます。これにより、購読可能なQueryListが得られます。これは、tempalte変数が変更されるたびに（つまり、ngIfがオンまたはオフになったとき）起動します。

（HTMLテンプレート）

<div>{{thing.stuff}}</div> 
<my-component #thing></my-component> 

（TSコード）

@ViewChildren('thing') thingQ: QueryList<MyComponent>; 
thing: MyComponent; 

ngAfterViewInit() { 
    this.doChanges(); 
    this.thingQ.changes.subscribe(() => { this.doChanges(); }); 
} 

doChanges() { 
    this.thing = this.thingQ.first; 
} 

B）あなたはセッターで@ViewChild使用することができます。これは、ngIfが変更されるたびにsetterを起動します。

（HTMLテンプレート）

<div>{{thing.stuff}}</div> 
<my-component #thing></my-component> 

（TSコード）

@ViewChild('thing') set SetThing(e: MyComponent) { 
    this.thing = e; 
} 
thing: MyComponent; 

は、これらの例の両方がngIfの外に、あなたが今、あなたのテンプレートで使用できる "もの" 変数を与える必要があります。 ts変数に、テンプレート（＃）変数と異なる名前を付けることができます。