Angular2：@ContentChild - 仅直接子级

Question

因此，为了更好的说明，我们将简化并尽量简洁。

<my-accordion>
    <my-title>My accordion</my-title>

    <my-accordion-item>
        <my-title>My accordion item 1</my-title>
        <my-content>Content 1</my-content>
    <my-accordion-item>
    <my-accordion-item>
        <my-title>My accordion item 2</my-title>
        <my-content>Content 2</my-content>
    <my-accordion-item>
</my-accordion>

如您所见，我对 my-accordion 和 my-accordion-item 使用（我的）标准 my-title

所以在我的手风琴组件中我有逻辑

private title:string = '';
@ContentChild( myTitle ) myTitle: myTitle;

ngAfterViewInit(){
    if(this.myTitle && this.myTitle.content.length !== 0){
        this.title = this.myTitle.content;
    }
}

所以，如果我的视图与之前的示例完全相同，那么它就可以工作......并且返回的标题是“My Accordion”，但是，如果我的根目录上没有 my-title 元素我的手风琴......像这样：

<my-accordion>        
    <my-accordion-item>
        <my-title>My accordion item 1</my-title>
        <my-content>Content 1</my-content>
    <my-accordion-item>
    <my-accordion-item>
        <my-title>My accordion item 2</my-title>
        <my-content>Content 2</my-content>
    <my-accordion-item>
</my-accordion>

标题将设置为“My Accordion item 1”，因为它获取整个 DOM 子树中的第一个 my-title

有没有办法只检查直系孩子？

Answer 1

@ContentChild()

不会，但

@ContentChildren()

会 https://angular.io/docs/ts/latest/api/core/index/ContentChildren-decorator.html

@ContentChildren( myTitle, {descendants: false}) myTitle: QueryList<myTitle>;

ngAfterContentInit() {
  console.log(this.myTitle.toArray()[0]);
}

另请参阅 angular 2 / typescript ：获取模板中的元素

Answer 2

2024 年 12 月：现在可以（自 Angular 14 起）使用

@ContentChild()

使用

{descendants: false}

仅获取直接子级（如果存在）。