html - @ContentChildren 没有在自定义组件中拾取项目

Question

我正在尝试使用 @ContentChildren 来获取所有带有 #buttonItem 标签的项目。

@ContentChildren('buttonItem', { descendants: true })

当我们在父组件中直接拥有 ref 项时，这会起作用。

<!-- @ContentChildren returns child item -->
<parent-component>
  <button #buttonItem></button>
<parent-component>

但是，如果带有 #buttonItem ref 的元素包装在自定义组件中，即使我设置了 ，它也不会被 @ContentChildren 选中>{descendants: true} 选项。

<!-- @ContentChildren returns empty -->
<parent-component>
  <child-component-with-button-ref></child-component-with-button-ref>
<parent-component>

我创建了一个简单的 StackBlitz example证明这一点。

Answer 1

似乎不是通过 github 解决此项目的时间表...我还发现一条评论说您不能跨 ng-content 边界查询。

https://github.com/angular/angular/issues/14320#issuecomment-278228336

下面是使元素从 OptionPickerComponent 冒泡的可能解决方法。

---

---

在 OptionPickerComponent 中计算 #listItem 并发出数组 AfterContentInit

 @Output() grandchildElements = new EventEmitter();     
 @ViewChildren('listItem') _items

  ngAfterContentInit() {
    setTimeout(() => {
        this.grandchildElements.emit(this._items)
    })
  } 

设置模板引用#picker，注册到(grandchildElements)事件并将$event设置为picker.grandchildElements

 <app-option-picker #picker [optionList]="[1, 2, 3]" (grandchildElements)="picker.grandchildElements = $event" popup-content>

在 PopupComponent 上创建输入以接受来自 picker.grandchildElements 的值

@Input('grandchildElements') grandchildElements: any

在 app.component.html 中接受 picker.grandchildElements 的输入

<app-popup [grandchildElements]="picker.grandchildElements">

popup.component 设置console.log打开和关闭

open() {
    if (this.grandchildElements) {
      console.log(this.grandchildElements);
    }
    else {
      console.log(this.childItems);
    }

 close() {
     if (this.grandchildElements) {
      console.log(this.grandchildElements);
    }
    else {
      console.log(this.childItems);
    }

popup.component 将您的 ContentChildren 改回 listItem

@ContentChildren('listItem', { descendants: true }) childItems: Element;

popup.component.html 设置头部表达式

<h3>Child Items: {{grandchildElements ? grandchildElements.length : childItems.length}}</h3>

堆栈 Blitz

https://stackblitz.com/edit/angular-popup-child-selection-issue-bjhjds?embed=1&file=src/app/option-picker/option-picker.component.ts