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

Question

我已经在 ts 文件中导入了 ViewChild,ElementRef,Renderer 但它显示错误“ERROR TypeError: Cannot read property 'nativeElement' of undefined”

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

@ViewChild('usernameField') input : ElementRef;

this.usernameField.nativeElement.focusIn();

期望关注输入元素。

Answer 1

我认为这会奏效

代替

this.usernameField.nativeElement.focusIn();

试试

this.usernameField.nativeElement.focus();

或者发布您的 html 以便我们查看问题所在？

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

喜欢

<input #usernameField

然后改变你的 ts

@ViewChild('usernameField') usernameField: ElementRef;

还要确保你在ngAfterViewInit中添加了焦点

喜欢

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

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(); }