如何自定义ng-bootstrap生成的模态框HTML结构？

嗨，这个需求我刚好在项目里实践过，ng-bootstrap提供了几种非常优雅的方式来实现通用模态框模板，彻底告别重复编写相同HTML结构的麻烦，下面给你分享两种最实用的方案：

方案一：创建通用基础模态框组件（最推荐） #

这种方式是把所有模态框的通用元素封装成一个基础组件，其他模态框只需要嵌套自定义内容即可，扩展性极强。

步骤1：生成基础模态框组件 #

先创建一个BaseModalComponent（比如命名为app-base-modal），在它的模板里写好通用结构，同时预留内容投影插槽给自定义内容：

<!-- base-modal.component.html -->
<div class="modal-header">
  <h4 class="modal-title">{{ modalTitle }}</h4>
  <button type="button" class="btn-close" aria-label="关闭" (click)="activeModal.dismiss('点击关闭')"></button>
</div>
<div class="modal-body">
  <!-- 可选通用提示文本，通过输入属性控制显示 -->
  <p class="text-muted" *ngIf="showHintText">操作后无法撤销，请谨慎操作</p>
  <!-- 自定义内容插槽 -->
  <ng-content></ng-content>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-secondary" (click)="activeModal.close('取消')">取消</button>
  <!-- 额外操作按钮的插槽，用于插入自定义按钮 -->
  <ng-content select="[modal-extra-actions]"></ng-content>
</div>

然后在组件类里定义输入属性和注入NgbActiveModal：

// base-modal.component.ts
import { Component, Input } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-base-modal',
  templateUrl: './base-modal.component.html',
  styleUrls: ['./base-modal.component.css']
})
export class BaseModalComponent {
  @Input() modalTitle!: string;
  @Input() showHintText = false; // 可选，控制通用提示是否显示

  constructor(public activeModal: NgbActiveModal) {}
}

步骤2：在业务组件中使用基础模态框 #

调用的时候，只需要把自定义内容嵌套在app-base-modal标签里，还可以通过输入属性控制通用元素的显示：

// 业务组件的ts文件
import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { BaseModalComponent } from './base-modal/base-modal.component';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
})
export class YourComponent {
  constructor(private modalService: NgbModal) {}

  openEditModal() {
    const modalRef = this.modalService.open(BaseModalComponent, { size: 'lg' });
    modalRef.componentInstance.modalTitle = '编辑用户信息';
    modalRef.componentInstance.showHintText = true;

    // 监听模态框关闭事件
    modalRef.result.then(
      (result) => console.log(`关闭结果: ${result}`),
      (reason) => console.log(`关闭原因: ${reason}`)
    );
  }
}

如果需要添加自定义底部按钮，直接用内容投影的插槽：

<!-- 业务组件的模板文件 -->
<ng-template #editUserModal>
  <app-base-modal modalTitle="编辑用户信息" [showHintText]="true">
    <!-- 自定义内容：用户表单 -->
    <form>
      <div class="mb-3">
        <label class="form-label">用户名</label>
        <input type="text" class="form-control" placeholder="请输入用户名">
      </div>
      <!-- 其他表单字段... -->
    </form>

    <!-- 额外操作按钮，匹配插槽选择器 -->
    <button type="button" class="btn btn-primary" modal-extra-actions (click)="modalRef.close('保存')">保存</button>
  </app-base-modal>
</ng-template>

方案二：复用ng-template模板（轻量场景） #

如果你的通用结构比较简单，也可以直接创建一个通用的ng-template，在需要的地方引用它，通过ng-container插入自定义内容：

<!-- 定义通用模板 -->
<ng-template #baseModalTemplate let-title="title" let-hint="hint">
  <div class="modal-header">
    <h4 class="modal-title">{{ title }}</h4>
    <button type="button" class="btn-close" aria-label="关闭" (click)="modalService.dismissAll()"></button>
  </div>
  <div class="modal-body">
    <p *ngIf="hint" class="text-muted">{{ hint }}</p>
    <!-- 插入自定义内容 -->
    <ng-container *ngTemplateOutlet="customContent"></ng-container>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="modalService.dismissAll()">取消</button>
  </div>
</ng-template>

<!-- 使用时的代码 -->
<ng-template #customContent>
  <p>这是我的自定义模态框内容</p>
</ng-template>

<button class="btn btn-primary" (click)="openModal()">打开模态框</button>

对应的ts代码：

import { Component, TemplateRef, ViewChild } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
})
export class YourComponent {
  @ViewChild('baseModalTemplate') baseModalTemplate!: TemplateRef<any>;
  @ViewChild('customContent') customContent!: TemplateRef<any>;

  constructor(private modalService: NgbModal) {}

  openModal() {
    const modalRef = this.modalService.open(this.baseModalTemplate);
    modalRef.componentInstance.title = '通用模板模态框';
    modalRef.componentInstance.hint = '这是通用提示文本';
    modalRef.componentInstance.customContent = this.customContent;
  }
}

总结 #

• 如果项目中有多个复杂的模态框，方案一的组件化方式是最优选择，它支持灵活的配置和扩展，维护起来也更方便；
• 如果只是简单的通用结构复用，方案二的模板复用更轻量，不需要额外创建组件。

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