angular4获得焦点事件_Angular 4 文本框自动获取焦点二

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

在HTML中对元素添加引用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

总结

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

如您喜欢交流学习经验,点击链接加入交流1群:1065694478(已满)交流2群:163560250

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值