ngIfがtrueになったときのトリガ機能が、表示された入力にフォーカスを設定します。

Question

現在、特定の入力フィールドにカーソルのフォーカスを設定しようとしています。これは、周囲のngIfがtrueのときに表示されます。 JS - 私はElementRefを取得しようとしているが、私はそれが初期化される前にそれをフェッチしようとするので、それはundefinedすべての時間を返す私のコンポーネントで

<div> 
    <button (click)="showFirst = !showFirst">Toogle</button> 
    <div *ngIf="showFirst"> 
     <!-- Some content --> 
    </div> 
    <div *ngIf="!showFirst"> 
     <input type="text" #myInput> 
    </div> 
</div> 

：
htmlコードは次のようになります。
のでqustionは次のようになります。それはshowFirst後に入力フィールドにフォーカスを設定することが可能であることはfalseになり、入力が見える取得する方法

？

Answer 1

this plunkerに示すようにあなたは、AfterViewCheckedライフサイクルフックにフォーカスを設定することができます。 AfterViewCheckedがトリガされるたびにではなく、入力要素が表示されるときにのみフォーカスが設定されるようにチェックを追加しました。

import { Component, ViewChild, AfterViewChecked, ElementRef } from '@angular/core'; 

export class MyComponent implements AfterViewChecked { 

    @ViewChild("myInput") private myInput: ElementRef; 

    public showFirst = true; 
    private prevShowFirst = true; 

    public ngAfterViewChecked(): void { 
    if (!this.showFirst && this.prevShowFirst) { 
     this.myInput.nativeElement.focus(); 
    } 
    this.prevShowFirst = this.showFirst; 
    } 
} 

Answer 2

autofocus属性を使用できます。 または、showFirstがfalseの場合は、（クリック）の最後にsetFocusを追加してください。

Answer 3

OnChangesライフサイクルフック内でElementRefを取得できます。以下のような何か：

OnChanges(): void { 
    if (!this.showFirst) { 
    // check ElementRef 
    } 
} 

Answer 4

角度は、コンポーネントのビューのすべてのチェック後に呼び出されるライフサイクルフックngAfterViewCheckedを持っています。

ビューが変更されると、このライフサイクルフックが呼び出され、ここでフォーカスのロジックを記述することができます。

ngAfterViewChecked(){ 
    // you logic for focusing or check ElementRef. 
}