Angular 2+ 指令 - 如何从相同或嵌套模板中的子指令获取 nativeElement

Question

我正在尝试创建一个指令来使用 Angular 2+ 管理 ARIA Web 可访问的选项卡事件，但我遇到了 Angular 指令的问题。

我想要分层指令，这样我就可以指定父指令并可以访问子指令，这样我就可以正确绑定 tabindex。

如果您需要参考，我在 stackblitz 上有一个完整的例子。

举个例子，我有 3 个指令。 AriaListBox, AriaLabel & AriaListItem. AriaListBox 是包含 AriaLabel 和 AriaListItems 集合的父项。

我已经能够使用 @ContentChild 获得对

AriaLabel

的引用，但不能使用

@ContentChildren

获得对 AriaListItem 指令的引用。

来自AriaListBox我正在尝试使用以下我认为应该在

ngAfterContentInit

事件中设置的Angular Documentation.

@ContentChildren(Directive, { descendants: true }) public items: QueryList<Directive>;

咏叹调列表框

src/aria/aria-listbox.directive.ts

@Directive({
  selector: '[AriaListBox]',
})
export class AriaListBoxDirective implements OnInit, AfterContentInit {
  @ContentChild(AriaLabelDirective) public label: AriaLabelDirective;
  @ContentChildren(AriaListItemDirective, { descendants: true })
  public listItems: QueryList<AriaListItemDirective>;

  constructor(private el: ElementRef, private searchService: SearchService) {}

  public ngAfterContentInit(): void {
    console.log('listItems', this.listItems);
  }
}

咏叹调标签

src/aria/aria-label.directive.ts

@Directive({
  selector: '[AriaLabel]',
})
export class AriaLabelDirective {
  constructor(public el: ElementRef) {}
}

AriaListItem

src/aria/aria-listitem.directive.ts

@Directive({
  selector: '[AriaListItem]',
})
export class AriaListItemDirective {
  constructor(public el: ElementRef) {}
}

HTML

src/search-link-list/search-link-list.component.html

我的 HTML 模板使用以下指令。

<div AriaListBox>
  <h3 AriaLabel>{{ title$ | async }}</h3>
  <ul>
    <li *ngFor="let item of items$ | async">
      <a href="{{ item.url }}" #link AriaListItem>{{ item.name }}</a>
    </li>
  </ul>
</div>

有什么我遗漏的吗？我试图使用选择器

@ContentChildren('AriaListItem')

或与

@ViewChildren(AriaListItemDirective)

相同的选择器和类似的

@ViewChildren('AriaListItem')

获得参考，但由于它是一个指令而不是一个组件，它也不起作用。

items$

在

search.service.ts

文件中模拟，并毫无问题地呈现到屏幕上。

编辑--

如果我检查 LinkListItemComponent 和 ListBoxDirective 生命周期事件，我可以看到

#link

QueryList 存在于

SearchLinkListComponent::ngAfterContentInit

之前的

AriaListBoxDirective::ngAfterContentInit

中，因此指令似乎应该可以访问内容。

感谢您的帮助！