ABP.io 7.3 Angular模板中如何设置模态框尺寸？

ABP Angular版的<abp-modal>基于NG-ZORRO模态框组件封装，确实没有提供商业版后端那样的size="Large"直接属性，不过可以通过以下两种方式设置尺寸：

方法一：通过modalOptions传入NG-ZORRO配置 #

利用组件的modalOptions输入属性，传入NG-ZORRO的模态框配置参数指定宽度：

模板代码 #

<abp-modal [(visible)]="isModalOpen" [modalOptions]="customModalConfig">
  <ng-template #abpHeader>
    <h3>自定义尺寸模态框</h3>
  </ng-template>
  <!-- 模态框主体内容 -->
  <ng-template #abpFooter>
    <button abp-button type="button" (click)="isModalOpen = false">关闭</button>
  </ng-template>
</abp-modal>

组件类代码 #

import { Component } from '@angular/core';
import { NzModalOptions } from 'ng-zorro-antd/modal';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  isModalOpen = false;
  customModalConfig: NzModalOptions = {
    // 直接设置固定宽度
    width: '850px',
    // 也可以用NG-ZORRO预设尺寸标识，比如lg对应大尺寸
    // width: 'lg'
    // 还能通过nzBodyStyle调整内边距等样式
    // nzBodyStyle: { padding: '24px' }
  };
}

方法二：自定义CSS类实现灵活尺寸 #

如果需要响应式或特殊尺寸，给模态框添加自定义类后编写CSS规则：

模板代码 #

<abp-modal [(visible)]="isModalOpen" [modalOptions]="{ nzClassName: 'custom-wide-modal' }">
  <!-- 模态框内容 -->
</abp-modal>

全局样式（styles.css） #

.custom-wide-modal .ant-modal {
  width: 90% !important;
  max-width: 1400px;
  /* 适配小屏幕 */
  @media (max-width: 768px) {
    width: 95% !important;
  }
}

如果在组件样式中编写，需要开启ViewEncapsulation.None或使用穿透选择器（:host ::ng-deep），但更推荐写在全局样式里避免样式污染。

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