Angular5组件中如何以编程方式打开ng-bootstrap Modal（Bootstrap4）

我懂你现在的需求——已经能通过按钮触发Bootstrap模态框，但想搞清楚怎么在组件内部直接用代码触发打开对吧？其实ng-bootstrap的NgbModal服务已经提供了非常直接的API，咱们结合你的代码来一步步捋清楚。

首先先确认你已经正确完成了基础配置：你在组件里注入NgbModal服务的写法是对的，这是所有操作的前提：

// sample-modal.ts
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

constructor(private modalService: NgbModal) {}

接下来分两种常见场景给你讲编程式打开的方法：

场景1：模态框内容是当前组件模板里的<ng-template> #

你现在写的open(content)方法其实已经是基础的编程式调用了，但如果想不通过按钮点击，而是在组件内部的某个逻辑（比如组件初始化、数据加载完成、定时器触发）里打开，直接调用这个方法就行。

只需要给模板引用变量在组件类里做个声明，然后在需要的地方调用open：

// sample-modal.ts
import { ViewChild, ElementRef } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

export class SampleModalComponent {
  // 声明模板引用变量的类型
  @ViewChild('content') content!: ElementRef;

  constructor(private modalService: NgbModal) {}

  // 比如在组件初始化时自动打开模态框
  ngOnInit() {
    this.openModal();
  }

  openModal() {
    this.modalService.open(this.content);
  }
}

对应的模板还是你原来的结构就行：

<!-- sample-modal.html -->
<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>Modal body text goes here.</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
  </div>
</ng-template>

场景2：模态框是独立组件（更常用的工程化写法） #

实际项目里我们经常会把模态框做成独立组件，方便复用，这时候编程式打开的方式更实用：

1. 先创建一个独立的模态框组件，比如SampleModalComponent，记得注入NgbActiveModal来控制模态框的关闭/销毁：

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

@Component({
  selector: 'app-sample-modal',
  templateUrl: './sample-modal.component.html'
})
export class SampleModalComponent {
  // 可以接收父组件传递的数据
  @Input() modalData!: { title: string; content: string };

  constructor(public activeModal: NgbActiveModal) {}
}

2. 独立模态框的模板：

<!-- sample-modal.component.html -->
<div class="modal-header">
  <h4 class="modal-title">{{ modalData.title }}</h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('用户点击关闭')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <p>{{ modalData.content }}</p>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('确认关闭')">Close</button>
</div>

3. 在需要打开这个模态框的父组件里，直接调用modalService.open()并传入组件类，还能传递数据、监听关闭事件：

// 父组件.ts
import { SampleModalComponent } from './sample-modal.component';

export class ParentComponent {
  constructor(private modalService: NgbModal) {}

  // 在任意逻辑里触发打开
  openModalProgrammatically() {
    const modalRef = this.modalService.open(SampleModalComponent);
    // 传递数据给模态框组件
    modalRef.componentInstance.modalData = {
      title: '编程式打开的模态框',
      content: '这是通过组件内部代码触发的模态框'
    };

    // 监听模态框关闭/取消的事件
    modalRef.result.then(
      (result) => {
        console.log(`模态框关闭，返回值：${result}`);
      },
      (reason) => {
        console.log(`模态框取消，原因：${reason}`);
      }
    );
  }
}

最后补个重要的注意点 #

别忘了在你的Angular模块中导入NgbModalModule，不然NgbModal服务会注入失败：

import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [
    // ...其他模块
    NgbModalModule
  ]
})
export class YourAppModule {}

内容的提问来源于stack exchange，提问作者Alf del Callar