angular - 有没有一种 Angular2 方法可以专注于输入字段？

Question

在方法结束时，我将清除一些字段，这很简单:

this.modelname.fieldname1 = "";
this.modelname.fieldname2 = "";

清除字段后，我希望光标出现在 field1 中。

是否有 Angular2 方法可以做到这一点，还是我只使用老式的 Javascript？

Answer 1

不建议直接在Angular中访问dom。 Angular 提供了渲染器 (Angular2) 和渲染器 2(Angular4) 抽象。

这是在 Angular 2 中的做法:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input #inp id="myInput" type="text">
      <button (click)="setFocus()">Set Focus</button>
    </div>
  `,
})
export class App {
  @ViewChild('inp') inp:ElementRef;

  constructor(private renderer: Renderer) {
  }

  setFocus() {
    this.renderer.invokeElementMethod(this.inp.nativeElement, 'focus');
  }
}

在 Angular4 中，Renderer 被弃用并添加了 Renderer2。 invokeElementMethod 被删除，并且有一个关于它的讨论: https://github.com/angular/angular/issues/13818#issuecomment-297815331

这是 Angular 4 的方式:

 let onElement = this.renderer2.selectRootElement('#myInput');
 onElement.focus();