角度2/4の入力要素のフォーカス

Question

（クリック）イベントによる入力にフォーカスを設定するにはどうすればよいですか？私が代わりにこの機能を持っているが、私は明らかにしてみてください何か（ここでは、角初心者）

sTbState: string = 'invisible'; 
private element: ElementRef; 
toggleSt() { 
    this.sTbState = (this.sTbState === 'invisible' ? 'visible' : 'invisible'); 
    if (this.sTbState === 'visible') { 
    (this.element.nativeElement).find('#mobileSearch').focus(); 
    } 
} 

Answer 1

を欠けているこの：

であなたHTMLファイル：あなたのTSで

<button type="button" (click)="toggleSt($event, toFocus)">Focus</button> 

<!-- Input to focus --> 
<input #toFocus> 

ファイル：

sTbState: string = 'invisible'; 

toggleSt(e, el) { 
    this.sTbState = (this.sTbState === 'invisible' ? 'visible' : 'invisible'); 
    if (this.sTbState === 'visible') { 
    el.focus(); 
    } 
} 

Answer 2

これには@ViewChildデコレータを使用できます。ドキュメントはhttps://angular.io/api/core/ViewChildです。 http://plnkr.co/edit/KvUmkuVBVbtL1AxFvU3F

コードのこの要旨は、に降りてくるあなたの入力素子と配線までに、あなたのテンプレートでクリックイベントを名前を与える：

はここで働いてplnkrです。あなたのコンポーネントで

<input #myInput /> 
<button (click)="focusInput()">Click</button> 

、あなたが必要とする機能を実行するためにクリックハンドラを実装し、その後、要素（複数可）を検索するために@ViewChildまたは@ViewChildrenを実装します。

export class App implements AfterViewInit { 
    @ViewChild("myInput") inputEl: ElementRef; 

    focusInput() { 
    this.inputEl.nativeElement.focus() 
    } 

ここで、ボタンをクリックすると、点滅するキャレットが入力フィールド内に表示されます。 ElementRefの使用は、XSS攻撃（https://angular.io/api/core/ElementRef）のようなセキュリティリスクとしては推奨されません。 と互換性が低くなります。

ngAfterViewInitイベントが発生すると、inputEl変数が最初に使用可能になることにも注意してください。