關注價值變化的投入領域？ angular2

Question

我有一個輸入字段，當modalOpen = true時，它會添加活動類，並且這個工作正常。

但是，我希望它在此模式顯示時專注於輸入字段？

<div [class.active]="modalOpen"> 
    <input> 
</div> 

Answer 1

我在哪裏設置當元件涉及「活性」集中的樣品組分。 這裏是我的方法：

export class Spreadsheet implements AfterViewChecked{ 

    ngAfterViewChecked(){ 
     //some logic to find "active" element 
     let cell = document.getElementById(this.model.current.rowIndex + '-' + this.model.current.columnIndex); 
     cell.focus(); 
    } 
} 

這裏更多： http://www.syntaxsuccess.com/viewarticle/virtualized-spreadsheet-component-in-angular-2.0

http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet

Answer 2

本地模板變量添加到您的輸入元素：<input #input1>，並得到一個參考使用它來@ViewChild('input1') input1ElementRef;。

然後，無論你在哪裏設置modalOpen到true，還可以將焦點集中在this._renderer.invokeElementMethod(this.input1ElementRef.nativeElement, 'focus', [])的輸入元素上。
使用渲染器是Web工作者的安全。

import {Component, ViewChild, Renderer} from 'angular2/core'; 

@Component({ 
    selector: 'my-comp', 
    template: `<div [class.active]="modalOpen"> 
     <input #input1> 
    </div> 
    <button (click)="showModal()">show modal</button>` 
}) 
export class MyComponent { 
    @ViewChild('input1') input1ElementRef; 
    modalOpen = false; 
    constructor(private _renderer:Renderer) {} 
    showModal() { 
    this.modalOpen = true; 
    // give Angular a chance to create or show the modal 
    setTimeout(_ => 
     this._renderer.invokeElementMethod(
     this.input1ElementRef.nativeElement, 'focus', []); 
    ); 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: `<my-comp></my-comp>`, 
    directives: [MyComponent] 
}) 
export class AppComponent { 
    constructor() { console.clear(); } 
} 

plunker