Question

我有以下结构，其中父组件中有嵌套的子组件，我需要以编程方式将焦点放在子组件div上。

我已经复制了this stackblitz for the above problem。

如果您看到ts文件，我已完成以下操作

 ngAfterViewInit(){
  console.log(this.test);
  this.test.toArray()[1].nativeElement.focus();
  this.test.toArray()[1].nativeElement.firstElementChild.nativeElement.focus(); //this dosent work
 }

console.log返回一个div的查询列表（在我原来的情况下是一个组件列表），并且我有一个firstElementChild a（组件），其firstChildElement是一个div，我需要设置样式并添加焦点。但是我无法这样做，就像你检查它返回{1}}的堆栈跟踪一样。

在简单的作品中结构：

ParentComponent - ＆gt; viewChild获取Child查询列表 - ＆gt;数组元素有组件 - ＆gt;每个组件都有一个firstElementChild - ＆gt;具有div的属性我需要关注

更新

感谢所有人的反馈和帮助，我们非常感谢，但现在的确如此它的工作原理，但只有当我为所有嵌套的div提供tab索引时，我才希望它能够将选项卡索引向下传递给孩子。这就是问题。任何解决这个问题的方法都需要从广义上修改我所有嵌套组件的模板

Answer 1

尝试更改

this.test.toArray()[1].nativeElement.firstElementChild.nativeElement.focus(); //this dosent work

到

this.test.toArray()[1].nativeElement.firstElementChild.focus(); //this should work :-)

nativeElement.firstElementChild不是ElementRef，但已经是HTMLElement =＆gt;它没有属性nativeElement。

Answer 2

或者，HTML元素的children属性也会返回HTMLElementCollection，如下所示，

this.test.toArray()[1].nativeElement.children[0].focus();

<强> Updated Stackblitz

Answer 3

更新了模板

<div>
  <p> Welcome to the world of  {{testHtml}} </p>
</div>

<div *ngFor = "let i of numbers; let ii = index" [attr.tabIndex] = "ii==00 ? 0 : null" #test>
  <div>{{i}}
    <div>
      MY test
    </div>
  </div>
</div>

更新了.ts文件

 ngAfterViewInit(){
  this.test.toArray()[0].nativeElement.focus();
 }

注意：您对所有元素使用相同的tabindex。您需要为要初始关注的选定对象定义tabindex。

如何在本机Element Angular中设置嵌套的firstElementChild样式

3 个答案: