Question

我有一个导航列表组件，它试图获取相同类型的子内容。

<nav-list>
    <nav-list>
        <div>
            <nav-item>item1</nav-item>
        </div>
        <nav-item>Item 2</nav-item>
    </nav-list>
</nav-list>

export class NavListComponent {
   @ContentChildren(forwardRef(() => NavListComponent)) childNavList;
}

问题是host本身也包含在childNavList中。所以在上面的例子中，childNavList长度是两个。

我认为ContentChildren应该只让孩子们得到，我该怎样解决这个问题？

Answer 1

很久以前似乎有一个bug report in Angular为此打开了。查看有关当前解决方法的讨论，在使用QueryList时过滤掉列表中的当前组件。

该线程中使用的示例包括：

.filter(x => x !== this)

或

.filter(x => x.element.nativeElement !== this.element.nativeElement)

Angular 2 ContentChildren选择主机元素

1 个答案: