angular - Angular2:@ContentChild-仅直系子代

因此为了更好的说明将尽量简化和简洁。

<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>

如你所见，我使用我的手风琴和手风琴项目的标准标题
所以在我的手风琴部分我有逻辑

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

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

所以，如果我的观点和前面的例子完全一样的话，那就可以了……标题是“我的手风琴”，但是，如果我的手风琴的根上没有“我的标题”元素，就像这样：

<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>

标题将被设置为“我的手风琴项目1”，因为它在整个dom子树中获得第一个我的标题。
有没有办法检查直系子女？

最佳答案

@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