angular - Angular 2+如何检测ng-content ContentChild元素是否实现接口

Question

我正在编写一个 Angular 2+ 组件，它为其他包含的组件（作为 ng-content 标签提供）提供“修饰”。

例如：

<my-container>
    <your-component></your-component>
</my-container>

your-component 成为 TypeScript my-component 代码中的 ContentChild。

但是，如果我能以某种方式检测到组件并询问它是否实现了某个接口（我们称之为 ICanHelpMyComponentDoItsJobBetter），那么我的组件代码可以激活某些附加功能。

我无法弄清楚如何回答“你实现了 ICanHelpMyComponentDoItsJobBetter 接口吗？”这个问题。查看 ContentChild 时在我的组件内部。如果是这样，我想将其转换为该接口实例并进行其他调用或设置其他属性。

任何帮助将不胜感激——这显然是一个高级 Angular 问题。谢谢！

附加信息（2021 年 5 月 4 日）：

由于我的 your-content 标签不包含选择器（而且我不想强迫我的用户指定一个），我无法在 TS 文件中使用 @ContentChild('xxx') 。所以这一直是个问题——我不知道如何在我的 TS 代码中把它变成一个可用的成员。

我尝试的另一件事是在 ng-content 周围创建一个 @ViewChild 元素，如下所示：

<div #ngContentDiv>
    <ng-content></ng-content>
</div>

所以现在我可以在我的 .ts 文件中有这个：@ViewChild('ngContentDiv') ngContentDiv: ElementRef;

再后来，在 ngAfterContentInit() 东西全部初始化的时候，我可以问：this.ngContentDiv.nativeElement.children[0]

这就是元素——但我似乎不知道如何处理它。

显然，如果有办法将它直接放入@ContentChild，那会更好，但我仍然设法找到有问题的元素，当我检查它时，它确实是我在测试中指出的元素案子。

我已经尝试将其作为接口的实例进行转换——不走运。我尝试使用带有自定义指令的@ContentChildren，然后尝试调用它的方法——仍然没有。

这里不急，但我摸不着头脑——那个组件就在那里——如果我能以某种方式将它转换为它实现的东西，我终于可以要求它帮助促进它的呈现——显然很多人不会实现这个接口，但我不在乎那些。

标签： angularinterfaceng-content

Answer 1

您可以尝试检查组件是否具有您的功能实现

// Check if the component has property i am interested and check if that property is a function

if(!!this.myCustomContentChild['myCustomFeature'] && typeof this.myCustomContentChild['myCustomFeature'] === 'function' ) { 

// then call function

this.myCustomContentChild['myCustomFeature']();

}