如何在Clarity Modal中正确显示Alert组件？

你尝试在Clarity Modal中显示Alert，但当前代码导致显示异常，修正方案如下：

问题原因 #

你的代码错误在于在<clr-modal>组件内部重复嵌套了完整的Modal结构（.modal、.modal-dialog、.modal-content），而<clr-modal>作为Clarity封装组件，本身已自动生成这些基础DOM结构，手动添加会引发样式冲突，导致布局异常。

修正后的代码 #

基础写法

<clr-modal [(clrModalOpen)]="openAWANTIVer2WSExceptionGUI" [clrModalClosable]="true" [clrModalStaticBackdrop]="true">
  <div class="modal-content">
    <div id="al" class="alert alert-success alert-sm" role="alert">sadfs dsfdsfasf </div>
  </div>
</clr-modal>

规范结构写法（带标题、底部按钮）

<clr-modal [(clrModalOpen)]="openAWANTIVer2WSExceptionGUI" [clrModalClosable]="true" [clrModalStaticBackdrop]="true">
  <h3 class="modal-title">提示信息</h3>
  <div class="modal-body">
    <div id="al" class="alert alert-success alert-sm" role="alert">sadfs dsfdsfasf </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary" (click)="openAWANTIVer2WSExceptionGUI = false">确认</button>
  </div>
</clr-modal>

说明 #

移除多余的重复Modal结构后，Alert会正确嵌入Modal的内容区域，样式和布局完全符合Clarity的设计规范，不会出现异常显示问题。

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