javascript - Angular 2 ContentChildren 选择宿主元素

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 应该只得到 child ，我该如何解决这个问题？

Answer 1

好像有一个bug report in Angular很久以前就为此打开了。查看那里的讨论，其中当前的解决方法是在使用 QueryList 时从列表中过滤掉当前组件。

该线程中使用的示例是:

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

或

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