angular 页面输入框自动聚焦或者复选功能走过的坑
刚开始使用angular的小白，也是刚接触前端的小白，
最近需要实现进入页面输入框自动聚焦或者自动复选功能，当时在网上找了很多方法，
例如 使用 autofocus 这个的确是可以实现自动聚焦但是仅仅只是刚加载页面会聚焦一次，后续就没用了，这边在问过很多博客大佬和自己尝试，终于解决了问题，在这边记录一下，以便自己以后少走弯路。
首先第一步也是最重要的一步：
在ts里，通过viewChild获取dom节点，类似于我这里定义的 myInputNum
Ts:@ViewChild('myInputNum', { static: false }) myInputNum: ElementRef;
HTML:<input type="number" #myInputNum style="width:100px;height: 22px;" [(ngModel)]="demoValue"(keyup)="numberUp($event)" />
需要注意的就是
@ViewChild(‘myInputNum’, { static: false }) angular 8 以后 { static: false }必须要写
最后获取到dom节点后 需要在TS定义是聚焦还是复选
//数字输入弹出框聚焦onModalOpenNum() {//这里是重点，需要一个定时器，因为一般操作dom都是异步检查setTimeout(() => {this.loading = false;this.myInputNum.nativeElement.select();}, 100)}
我这边的操作是需要在弹出框里自动复选 如果是聚焦的话把 select 改为 focus就行
还有一种方式是通过css直接获取dom节点，就不用通过viewChild定义
Ts页面：//主页面自动聚焦ngAfterViewInit() {//这里是重点，需要一个定时器，因为一般操作dom都是异步检查setTimeout(() => {this.eleRef.nativeElement.querySelector('.input-focus').focus();}, 100);}
Html页面：
<input type="text" class="input-focus" nz-input nzSize="default" id="projectName"
[(ngModel)]="findName" (ngModelChange)="changeFn()" (keyup)="projectNameChanged($event,findName)"placeholder="请输入产品序列号或扫码条码" />尤其需要注意的就是必须把聚焦或者复选写在一个定时器里面，代码里面也有说到是原因，我也是从网上一些大佬博客写的和问的学到的，总之用到就是学到，有写的不好的地方请勿喷，前端小白，请各位大佬好好指教。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！