如何将Angular 2+弹窗组件嵌入AngularJS页面指定区段作为普通内容展示

该需求完全可以实现，你已经完成了样式调整的第一步，后续只需调整组件挂载逻辑、移除浮层专属规则即可，无需重写组件核心功能。

• 第一步：清理浮层专属样式
  找到模态框根元素的CSS配置，删除position: fixed/absolute、top/left/right/bottom、z-index这类脱离文档流的定位属性，可设置为默认的position: static或者根据布局需要设置position: relative，确保组件归入正常页面文档流。
• 第二步：根据使用场景选择适配方案
  两种适配方案可按需选择：
  1. 固定作为页面常驻内容展示
     建议将该Angular组件封装为Angular Elements自定义元素，直接在AngularJS模板中插入使用：

  // Angular 项目对应模块代码示例
  import { createCustomElement } from '@angular/elements';
  import { YourModalComponent } from './your-modal.component';
  
  @NgModule({
    declarations: [YourModalComponent],
    entryComponents: [YourModalComponent]
  })
  export class CustomModalModule {
    constructor(private injector: Injector) {
      // 注册为自定义Web组件
      const CustomModal = createCustomElement(YourModalComponent, { injector });
      customElements.define('app-inline-modal', CustomModal);
    }
    ngDoBootstrap() {}
  }
  

  注册完成后，直接在AngularJS页面的指定区段插入对应标签即可正常渲染，组件的输入输出属性也可以正常绑定使用：

  <!-- AngularJS 模板对应位置 -->
  <div class="page-content-section">
    <app-inline-modal [inputProp]="yourData" (outputEvent)="handleEvent($event)"></app-inline-modal>
  </div>
  

  2. 仍需动态触发渲染
     原有模态框一般是通过ComponentFactoryResolver动态创建并挂载到body或者全局弹窗容器下，你只需修改挂载目标为页面指定节点即可：

  先给AngularJS页面的目标区段添加唯一标识：<div id="inline-modal-container"></div>
  动态创建组件时指定挂载容器为上述节点，替换原来的全局容器即可。

• 第三步：清理冗余交互逻辑
  可根据业务需要，移除模态框原本的点击空白关闭、ESC键关闭、拖拽移动等浮层专属交互逻辑。

• 调整后检查组件内部的层级样式，避免和页面其他元素出现z-index冲突
• 如果组件内部有基于视口位置的计算逻辑（比如居中定位），同步修改为基于父容器的计算规则

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