我有一个带“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中似乎运行良好