我们如何在angular7中将焦点设置在输入元素上

Question

我已经在ts文件中导入了ViewChild，ElementRef，Renderer，但显示错误“ ERROR TypeError：无法读取未定义的属性'nativeElement'”

import { Component, OnInit,ViewChild,ElementRef,Renderer } from '@angular/core';

@ViewChild('usernameField') input : ElementRef;

this.usernameField.nativeElement.focusIn();

期望专注于输入元素。

Answer 1

我认为这会起作用

代替

this.usernameField.nativeElement.focus();

尝试

#usernameField

要不然发布您的html，以便我们可以找出问题所在？

只需检查您的输入标签<input #usernameField

喜欢

@ViewChild('usernameField') usernameField: ElementRef;

并更改您的ts

ngAfterViewInit

还要确保您已将重点放在ngAfterViewInit() { this.usernameField.nativeElement.focus(); }

喜欢

Collection<ShopBusinessEnum> shopBusinessEnums = getShopBusinessEnus();

Answer 2

运行input时将设置ngAfterViewInit，这意味着您不能像ngOnInit（）方法那样使用之前的值，当时的值为undefined

ngAfterViewInit() {
 this.usernameField.nativeElement.focus();
}

角度 verion 8+ ??

@ViewChild('usernameField',{static : true}) usernameField: ElementRef;

ngOnInit() {
 this.usernameField.nativeElement.focus();
}

检查此?How should I use the new static option for @ViewChild in Angular 8?

check this live demo ?‍♂️?‍♂️

Answer 3

只需将ElementRef注入构造函数中即可。

constructor(private el:ElementRef){ this.el.nativeElement.querySelector('input[type:"text"]').focus(); }