Angular 4 文本框自动获取焦点二

前端之家收集整理的这篇文章主要介绍了Angular 4 文本框自动获取焦点二前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Angular是不推荐直接通过DOM操作获取元素的,要操作元素就通过@ViewChild装饰器。

在HTML中对元素添加引用myInput:

<inputtype="text"#myInput>

在ts中可以通过ViewChild获取指定元素的引用:

import { ViewChild } from '@angular/core';

@ViewChild('myInput') input;

获取到对应元素的引用后,你想添加焦点,如下:

this.input.nativeElement.focus()

nativeElement获取的是原始DOM元素,至于你想在哪里自动获取焦点,就看你的业务逻辑了,可以配合Angular对应的生命周期使用。


这是在segmentfault上别人给我的答案。

我的业务需求是页面加载完毕就立马给input获取焦点;

所以用到了

ngAfterViewInit() : void {
this. renderer. invokeElementMethod(
this. infocus. nativeElement,'focus');
}
如果使用实现AfterViewInit,OnDestroy,那么你需要实现接口方法
export class ModalDirective implements AfterViewInit,OnDestroy {

  ngAfterViewInit() {
  }

  ngOnDestroy() {
  }
}
 
不然会报错
Implement lifecycle hook interface AfterViewInit for method ngAfterViewInit
原文链接:https://www.f2er.com/angularjs/145660.html

猜你在找的Angularjs相关文章