我有一个带“slider”组件的Angular应用程序,它使用ng-content
加载3个子组件。第一个子组件包含一个表单,我想在页面加载时将焦点设置在第一个字段上。我相信我已经正确设置了ViewChild以引用nativeElement,并且当我手动调用焦点时,此功能似乎可以工作。但是,我无法在初始页面加载时获得焦点。
我怀疑这与加载ng-content
的子组件有关,但我找不到解决方案。
下面是我的组件模板中的控件:
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name"
required
[(ngModel)]="model.name" name="name"
#name="ngModel">
<div [hidden]="name.valid || name.pristine" class="alert alert-danger mt-2">
Name is required
</div>
下面是组件逻辑:
import { Component, OnInit, AfterViewInit, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-definitions',
templateUrl: './definitions.component.html',
styleUrls: ['./definitions.component.scss']
})
export class DefinitionsComponent implements OnInit, AfterViewInit {
@ViewChild('name', { read: ElementRef }) ingredientName: ElementRef = {} as ElementRef;
ngAfterViewInit(): void {
console.log('el', this.ingredientName.nativeElement);
this.ingredientName.nativeElement.focus();
}
}
但是当我加载文档时,焦点没有出现。我可以在控制台中看到它正在记录元素,所以看起来好像在工作...但是焦点没有。
正如我提到的,这个组件是通过ng-content
加载到它的父组件中的,我想知道这是否会影响它的行为,但我不知道为什么会这样?
我也尝试过使用setTimeout
,但没有效果。
奇怪的是,如果我将this.ingredientName.nativeElement.focus()
Package 在一个方法中,并从组件上的一个按钮单击调用该方法,那么它就可以工作,但不能加载页面。
有人知道为什么这行不通吗?
谢谢
**更新:**好吧,原来这似乎是微软Edge的一个bug。在Chrome中似乎运行良好
1条答案
按热度按时间nhaq1z211#
尝试使用tabindex=“0”