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

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

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

例如：

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

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

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

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

任何帮助将不胜感激——这显然是一个高级的 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 与自定义指令一起使用，然后尝试调用其方法 - 仍然没有。

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

解决方法

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

// 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']();

}