能否在WebComponent插槽中使用Angular组件？需要哪些配置？

这种使用方式完全可行，渲染失败是Angular对自定义元素、插槽DOM移动逻辑的适配问题，按以下步骤配置即可解决：

1. 配置自定义元素识别规则 #

在你声明app-my-custom-component的NgModule中引入CUSTOM_ELEMENTS_SCHEMA，添加到模块的schemas数组中，让Angular可以识别<modal>这类非Angular内置的自定义元素标签，避免编译阶段的未知标签错误。

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyCustomComponent } from './my-custom.component';

@NgModule({
  declarations: [MyCustomComponent],
  imports: [BrowserModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

如果你的项目用了懒加载模块，需要在用到模态框的对应懒加载模块中也添加该配置。

2. 确认自定义组件可被外部访问 #

如果app-my-custom-component是定义在子模块中，需要同时将其加入到对应模块的declarations和exports数组中，确保Angular在其他模块用到该标签时可以正确识别并渲染其内容。

3. 适配WebComponent插槽的DOM移动逻辑 #

绝大多数带插槽的自定义模态框，会将<modal>标签内部的内容动态移动到自身Shadow DOM的插槽节点中。如果移动操作发生在Angular组件渲染完成之前，就会出现组件标签存在、但内部内容没有被Angular渲染的问题，可通过两种方案解决：

• 方案一（轻量首选）：用*ngIf延迟渲染组件，等模态框初始化完成后再加载内部组件

<modal [isOpen]="modalVisible">
  <app-my-custom-component *ngIf="modalVisible"></app-my-custom-component>
</modal>

• 方案二（适配复杂场景）：用ng-template手动挂载组件
  如果模态框加载逻辑更复杂，可以先将组件写为ng-template，监听模态框的open事件触发后，用ViewContainerRef手动把模板实例化插入到模态框的内容容器中。

4. 额外检查项 #

如果是用Angular构建的自定义WebComponent，需要确认你已经通过customElements.define完成了<modal>组件的全局注册，没有注册冲突或重复注册的问题。

内容的提问来源于stack exchange，提问作者pgrasland