Angular中如何捕获ng-bootstrap ActiveModal触发的事件？

我之前也踩过这个坑，你遇到的问题核心在于没搞清楚ng-bootstrap「Components as content」这种方式的本质：

1. 为什么直接在<ng-template>上绑定(removedKeys)会报错？
   <ng-template>只是一个模板占位符，不是你写的NgbdModalContent组件的实例，Angular根本找不到这个事件发射器，自然会报错。

2. 为什么直接用<ngbd-modal-content>标签会直接显示？
   这是因为你直接把组件渲染到了页面流里，而没有通过ng-bootstrap的NgbModal服务来初始化它作为模态框的内容，所以它会像普通组件一样直接显示出来。

正确的做法：通过模态框引用订阅子组件的输出事件 #

当使用「Components as content」时，我们需要通过modalService.open()方法传入组件类，然后通过模态框引用的componentInstance属性获取到子组件的实例，再订阅它的@Output事件。

步骤1：确保子组件的@Output正确定义

你的子组件NgbdModalContent应该已经有了类似这样的代码，确认一下：

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">删除Key</h4>
      <button type="button" class="btn-close" (click)="activeModal.dismiss()"></button>
    </div>
    <div class="modal-body">
      <ul>
        <li *ngFor="let key of keys">
          {{ key }}
          <button class="btn btn-sm btn-danger ms-2" (click)="onRemoveKey(key)">删除</button>
        </li>
      </ul>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" (click)="activeModal.close()">确认</button>
    </div>
  `
})
export class NgbdModalContent {
  @Input() keys!: string[];
  @Output() removedKeys = new EventEmitter<string[]>();
  private deletedKeys: string[] = [];

  constructor(public activeModal: NgbActiveModal) {}

  onRemoveKey(key: string) {
    // 从当前列表移除
    this.keys = this.keys.filter(k => k !== key);
    // 记录删除的key
    this.deletedKeys.push(key);
    // 实时触发事件（也可以在关闭模态框时一次性emit，看你的需求）
    this.removedKeys.emit([...this.deletedKeys]);
  }
}

步骤2：父组件中通过模态框实例订阅事件

在父组件里，我们通过NgbModal服务打开模态框，然后获取子组件实例并订阅事件：

import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { NgbdModalContent } from './modal-content.component';

@Component({
  selector: 'app-parent',
  template: `
    <button class="btn btn-primary" (click)="openDeleteModal()">打开删除Key模态框</button>
    <div class="mt-3">
      <strong>已删除的Key：</strong> {{ deletedKeys.join(', ') || '无' }}
    </div>
  `
})
export class ParentComponent {
  targetJson = { name: '张三', age: 28, email: 'zhangsan@example.com', address: '北京市' };
  targetJsonKeys = Object.keys(this.targetJson);
  deletedKeys: string[] = [];

  constructor(private modalService: NgbModal) {}

  openDeleteModal() {
    // 打开模态框，传入子组件类
    const modalRef = this.modalService.open(NgbdModalContent);
    
    // 传递keys给子组件（建议传副本，避免子组件直接修改父组件原数组）
    modalRef.componentInstance.keys = [...this.targetJsonKeys];

    // 关键：订阅子组件的removedKeys事件
    const subscription = modalRef.componentInstance.removedKeys.subscribe((removedKeys: string[]) => {
      this.deletedKeys = removedKeys;
      // 这里可以做你需要的逻辑，比如删除原JSON中的对应属性
      removedKeys.forEach(key => delete this.targetJson[key]);
    });

    // 可选：模态框关闭后取消订阅，避免内存泄漏（其实模态框关闭后子组件会销毁，订阅也会自动取消，严谨点可以加）
    modalRef.result.finally(() => {
      subscription.unsubscribe();
    });
  }
}

额外说明 #

• 如果你是想用「Template as content」的方式（也就是用<ng-template>），那事件绑定的方式又不一样，但根据你的描述，你是按照官方的「Components as content」示例来的，所以上面的方法是最匹配的。
• 传递数据给子组件时，尽量传副本（比如用[...this.targetJsonKeys]），这样子组件的修改不会直接影响父组件的原数据，符合Angular的单向数据流原则。

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