angular - 是否可以在 webcomponent 的插槽中使用角度组件

Question

在我的 Angular 应用程序（Angular v12 或最新版本）中，我使用了一个自定义的 Web 组件库。

其中之一是带有插槽的模态（类似于：https ://www.npmjs.com/package/@obsidiansoft/native-modal ）

（抱歉，我无权链接代码。）

我试图在我的模态中显示一个角度组件，但是在检查模态 DOM 时，我有类似的东西：

<modal>
  <app-my-custom-component></app-my-custom-component>
</modal>

Angular 不会在模态中呈现“app-my-custom-component”的 html。

当内容是纯 HTML 时，模式可以正常工作：

<modal>
  <p>A basic content</p>
</modal>

在浏览器中正确呈现。

这种用法可能吗？我需要什么 Angular 配置？

score 1 · Accepted Answer

lit-elements 返回 Shadow DOM 元素，这些元素不能直接访问。因此，即使您尝试在 Lit-Element 组件中插入 Angular 组件，您的 Angular 应用程序也无法对 Shadow DOM 和您添加的自定义元素（角度元素/组件）做出反应。

是的，从性能和架构的角度来看，这似乎不是一个好主意。

1 回答 1