テンプレートが角2で更新されるのを正しく待機する方法

Question

モデルが変更された後、テンプレートが角2のアプリケーションで更新されるのを待つ最善の方法を理解しようとしています。上記のコードでのsetTimeoutを使用して

@Component{ 
    template : `<button type="button" (click)="handleClick()">Click</button> 
       <div *ngIf="!hidden"> 
        <input type='text' #eleInput/> 
       </div>` 
} 
export class Sample{ 
    private hidden: boolean = true; 
    @ViewChild('eleInput') eleInput: ElementRef; 

    constructor(){} 

    handleClick(){ 
     this.hidden = false; 

     //nativeElement is undefined here 
     this.eleInput.nativeElement.focus(); 

     //nativeElement is defined here 
     setTimeout(() => { 
     this.eleInput.nativeElement.focus(); 
     }); 
    } 
} 

はハックと思われるので、私はより良いアプローチがありますかどうかを知りたいのです。

ありがとうございます！

Answer 1

使用[hidden]代わりのngIf。 NgIfは要素を削除します。これは、this.eleInput.nativeElement.focus();がsetTimeoutなしで動作しない理由です。これは、DOM要素が追加の参照用に設定される直前にthis.eleInput.nativeElement.focus();行が実行されるためです。
[hidden]プロパティはDOM要素を削除しません。要素を表示したり隠したりするだけです。したがって、DOM要素の参照はそこにあり、nativeElementは未定義ではありません。それで、うまくいくでしょう。

<div [hidden]="hidden">      //<<<===use hidden instead of *ngIf 
      <input type='text' #eleInput/> 
</div> 

---

private hidden: boolean = true; 
    @ViewChild('eleInput') eleInput: ElementRef; 

    constructor(){} 

    handleClick(){ 
     this.hidden = false;      
     this.eleInput.nativeElement.focus();  //<<<===now this will work. 
    } 
} 

Answer 2

テンプレートが更新されるのを待つ方法はありません。

あなたはChangeDetectorRef

constructor(private cdRef:ChangeDetectorRef) {} 

を注入し、その後、私の知る限り、コールから戻ると、テンプレートが更新される知っているように

this.cdRef.detectChanges(); 

を呼び出すことができます。