时间戳

首页 > 解决方案 > 如何从指令中访问某种类型的所有子组件？

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

问题描述

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

基本上，我正在使用一些开箱即用的 3rd 方组件，它们不能很好地协同工作，因此我着手编写一个指令，我可以附加到一个指令上并处理一些自定义逻辑。布局看起来像这样：

<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，然后在我的PivotGridComponentusing上设置高度Renderer2。但是，问题是对第 3 方有一个警告，PivotGridComponent因为我必须设置组件height本身的属性，否则我没有滚动条。

我试过了@ViewChildren，@ContentChildren但@host() @self() @optional()这些都不能抓住我的底层PivotGridComponent。我本来只是放入@ViewChildren拆分器组件本身，但这也是第 3 方组件，所以它不是一个选项。似乎也无法以与导航树相同的方式导航组件ElementRef树。

如何从指令中访问组件？我猜它不再可能从ElementRef我链接的 GitHub 问题中获取组件。

标签： angularangular-directive

解决方案

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

这是一个例子：

@ContentChildren(SplitPanelComponent) public splitPanelComponents: QueryList<SplitPanelComponent>;

您可以在指令或Splitter组件中使用它（您在其中应用指令）并将其传递给指令。

如果您想要一个更具体的示例，您可以查看我也在使用的库的代码示例@ContentChildren。

这里的工作示例。

推荐阅读