Angular 将输入字段的焦点放在值更改上？角2

我有一个输入字段，当modalOpen=true时，它会添加类active，这很好

但是，当这个模式显示时，我希望它关注输入字段

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

---

我有一个示例组件，当一个元素处于“活动”状态时，我可以在其中设置焦点。 我的做法如下：

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();
    }
}

详情如下：

---

我有一个示例组件，当一个元素处于“活动”状态时，我可以在其中设置焦点。 我的做法如下：

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();
    }
}

详情如下：

---

将本地模板变量添加到输入元素：

，并使用

@ViewChild（'input1'）input1ElementRef获取对它的引用

然后，无论您将
modalOpen
设置为
true
，也可以使用
this.\u 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(); }
}

从'angular2/core'导入{Component，ViewChild，Renderer}；
@组成部分({
选择器：“我的公司”，
模板：`
显示模态`
})
导出类MyComponent{
@ViewChild（'input1'）input1ElementRef；
莫达洛彭=假；
构造函数（私有_呈现器：呈现器）{}
showModal（）{
this.modalOpen=true；
//给Angular一个创建或显示模态的机会
setTimeout（U8;=>
此.\u renderer.invokeElementMethod(
this.input1ElementRef.nativeElement，'焦点'，[]）；
);
}
}
@组成部分({
选择器：“我的应用程序”，
模板：``，
指令：[MyComponent]
})
导出类AppComponent{
构造函数（）{console.clear（）；}
}

将本地模板变量添加到输入元素：
，并使用
@ViewChild（'input1'）input1ElementRef获取对它的引用

然后，无论您将
modalOpen
设置为
true
，也可以使用
this.\u 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(); }
}

从'angular2/core'导入{Component，ViewChild，Renderer}；
@组成部分({
选择器：“我的公司”，
模板：`
显示模态`
})
导出类MyComponent{
@ViewChild（'input1'）input1ElementRef；
莫达洛彭=假；
构造函数（私有_呈现器：呈现器）{}
showModal（）{
this.modalOpen=true；
//给Angular一个创建或显示模态的机会
setTimeout（U8;=>
此.\u renderer.invokeElementMethod(
this.input1ElementRef.nativeElement，'焦点'，[]）；
);
}
}
@组成部分({
选择器：“我的应用程序”，
模板：``，
指令：[MyComponent]
})
导出类AppComponent{
构造函数（）{console.clear（）；}
}


{{myInput.focus（）}

只需将{{myInput.focus（）}}添加到模板内的输入之后即可

{{myInput.focus（）}

只需在模板内的输入之后添加{{myInput.focus（）}，
看起来像一个dup，看起来像一个dup，谢谢！我一直在寻找这个-我想在点击按钮时集中输入。谢谢！我一直在寻找这个——我想在单击按钮时聚焦输入。