如何从指令访问某种类型的所有子组件？

Question

我已经研究了许多不同的线程，但是仍然没有找到适合我的方法。我能找到的最接近的东西似乎很久以前已被弃用：https://github.com/angular/angular/issues/8277

[基本上，我正在使用许多第三方组件，它们在开箱时不能很好地配合使用，因此我着手编写一条可以附加到一个指令并处理一些自定义逻辑的指令。布局看起来像这样：

<splitter myDirective>
    <split-panel>
        <my-component-1>
            <div>
                <pivot-grid></pivot-grid>
            </div>
        </my-component-1>
    </split-panel>
    <split-panel>
        <my-component-2>
            <div>
                <pivot-grid></pivot-grid>
            </div>
        </my-component-2>
    </split-panel>
</splitter>

拆分器允许在运行时调整大小。在我的指令中，我可以访问拆分器组件及其ElementRef。我目前正在做的是递归地在children上浏览ElementRef.nativeElement，然后使用PivotGridComponent设置Renderer2上的高度。但是，问题在于第三者PivotGridComponent有一个警告，因为我必须设置component本身的height属性，或者我没有滚动条。

我已经尝试过@ViewChildren，@ContentChildren，@host() @self() @optional()，但这些都无法抢占我的基础PivotGridComponent。我只将@ViewChildren放在分离器组件本身中，但这也是第三方组件，因此这不是一个选择。用我导航ElementRef树的方式似乎也不可能导航组件树。

如何从指令中访问组件？我猜测由于我链接的GitHub问题似乎表明，不再可能从ElementRef中获取组件。

Answer 1

您可以使用@ContentChildren从更高的组件/指令中检索子组件。每当添加，删除或移动子元素时，查询列表都将更新，并且查询列表中可观察到的更改将发出新值。

这里是一个例子：

@ContentChildren

您可以在指令中或在@ContentChildren(SplitPanelComponent) public splitPanelComponents: QueryList<SplitPanelComponent>; 组件（在其中应用指令的位置）中使用它，并将其传递给指令。

[如果您想要更具体的示例，可以在我也使用Splitter的地方查看a code example of my library。

工作示例@ContentChildren。