如何优化Angular模态弹窗 实现与参考示例一致的错误信息弹窗效果

你当前实现和参考效果的差异来源于内容区使用了带table-striped样式的表格组件，会自带条纹、边框、多余边距，和参考示例的纯文本提示样式不符，按以下步骤调整即可：

1. 替换内容区代码：将原本的.table-responsive表格容器替换为ng-bootstrap模态框自带的.modal-body容器包裹提示文本，即可消除表格相关样式，得到参考效果的简洁内容区
2. 如需匹配参考示例的小尺寸弹窗，可在调用模态框打开方法时传入size: 'sm'参数控制弹窗尺寸

修改后的完整代码如下：

<!-- 模态框 -->
<ng-template #mymodal let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">错误提示</h4>
    <button type="button" class="close" aria-label="关闭按钮" aria-describedby="modal-title" (click)="modal.dismiss('Cross click')">
     <span aria-hidden="true">&times;</span>
   </button>
  </div>

  <div class="modal-body">
    This is a text
  </div>

  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">确定</button>
  </div>
</ng-template>

如果需要调整弹窗尺寸，调用模态框的代码示例：

// 组件ts文件中打开模态框的逻辑
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

constructor(private modalService: NgbModal) {}

openErrorModal() {
  // 传入size参数控制弹窗大小，可选值有 sm / lg / xl 等
  this.modalService.open(this.mymodal, { size: 'sm' });
}

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