使用datacenter源码时Angular模态组件AlertComponent未弹出的求助

具体调整步骤 #

• 删除dashboard模板里静态写死的<app-alert>标签：这是最常见的根因，原项目代码把AlertComponent作为普通子组件直接嵌入了dashboard的模板节点，组件会跟着文档流渲染在dashboard内容区，完全没有模态的浮层效果，把这段静态挂载的代码删掉是第一步要改的内容。
• 修正AlertService的动态组件挂载逻辑：
  原服务在创建AlertComponent实例时，把生成的视图节点绑定在了dashboard的视图容器内，没有让组件脱离当前页面的文档流。需要在服务的open方法中调整逻辑，拿到组件实例的DOM节点后，把它追加到全局body下的独立模态容器中，不再受dashboard的布局约束。
• 补全AlertComponent的浮层定位样式：
  就算挂载逻辑正确，缺了定位样式也会让组件直接平铺在页面上。需要在AlertComponent的样式文件里给宿主元素加上固定定位规则，参考需要补全的样式片段：

  :host {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    min-width: 320px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  }
  

• 清理dashboard模板里直接渲染Alert内容的代码：如果dashboard模板里有直接输出日期的插值语句，比如{{ currentRefreshTime }}，要把这段代码删掉，日期的展示逻辑完全交给AlertComponent自己的模板处理，避免内容脱离模态直接显示在dashboard页面上。
• 核对刷新动作的调用链路：确认触发刷新操作的逻辑里，是通过AlertService的open方法弹出模态，而不是直接把Alert的参数赋值给dashboard的本地属性，确保每次刷新时是动态创建独立的AlertComponent实例来展示内容，而不是复用静态挂载的组件。

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