如何从子组件为父组件的多个模态框实例设置不同样式？

你可以通过Angular的:host与::ng-deep组合，让子组件的样式穿透到父级模态框容器，实现每个模态框实例的独立样式配置，具体实现如下：

第一个子组件（对应300px宽的模态框） #

在该子组件的样式文件中添加以下代码：

:host ::ng-deep {
  .modal-dialog {
    width: 300px;
  }
}

:host会将样式限定在当前子组件的上下文范围内，::ng-deep则突破组件样式隔离规则，直接修改父级模态框的.modal-dialog元素宽度。

第二个子组件（对应600px宽的模态框） #

在对应子组件的样式文件中添加：

:host ::ng-deep {
  .modal-dialog {
    width: 600px;
    background: none;
    padding: 2px;
  }
}

同样借助:host的上下文限定，确保这些样式只作用于当前子组件所在的模态框实例，不会影响其他模态框。

注意事项 #

• 要保证模态框的.modal-dialog元素在子组件的DOM层级之上，这样::ng-deep才能正确选中目标元素。
• 这种方式基于Angular默认的Emulated视图封装，若使用None封装，建议给每个模态框实例添加独立类名配合使用，但:host的上下文限定依然能有效避免样式污染。

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