Angular 2 : @ContentChild - only immediate children

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

所以在我的 Accordion 组件中我有逻辑

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

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

所以，如果我的 View 与我之前的示例完全一样，它就可以正常工作....并且返回的标题是“我的 Accordion ”，但是，如果我没有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>

标题将设置为“我的 Accordion 项目 1”，因为它在整个 DOM 子树中获得第一个 my-title

有没有办法只检查直接 child ？

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 : get hold of an element in the template