Angular ng-bootstrap模态框如何调用父组件refreshTable()方法

你可以通过两种低耦合的方式实现需求，不需要直接在子组件中硬编码父组件方法调用：

方法1：监听模态框关闭回调（推荐） #

NgbModal.open()返回的NgbModalRef实例自带Promise状态，会在模态框关闭/驳回时触发对应回调，你只需要在父组件打开模态框时绑定回调逻辑即可，还可以通过关闭时传入的参数区分操作类型，避免取消操作也触发刷新。

父组件代码修改 #

调整viewModal方法，监听模态框关闭结果：

viewModal() {
    const openModal = this.ngbModal.open(ModalComponent);
    openModal.componentInstance.id = row.id;
    // 监听模态框关闭结果
    openModal.result.then(
        (closeReason) => {
            // 只有更新操作成功关闭时才刷新表格
            if (closeReason === 'update_success') {
                this.refreshTable();
            }
        },
        () => {
            // 模态框被驳回（点背景、点取消按钮）的逻辑，无需求可留空
        }
    )
}

子组件代码修改 #

在更新成功关闭模态框时，传入自定义状态标识：

updateParent() {
    // 执行数据库更新逻辑
    // 关闭时传入操作成功标识
    this.activeModal.close('update_success');
}

方法2：向模态框传入回调函数 #

如果需要在子组件操作流程的任意节点触发父组件逻辑，可以直接在打开模态框时，把父组件方法绑定上下文后传入模态框实例。

父组件代码修改 #

打开模态框时传入绑定好this的刷新方法：

viewModal() {
    const openModal = this.ngbModal.open(ModalComponent);
    openModal.componentInstance.id = row.id;
    // 传入绑定父组件上下文的刷新方法
    openModal.componentInstance.updateSuccessCallback = this.refreshTable.bind(this);
}

子组件代码修改 #

声明传入的回调属性，更新成功后调用：

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

export class ModalComponent {
    // 声明父组件传入的回调属性
    updateSuccessCallback: () => void;

    constructor(private activeModal: NgbActiveModal) {}

    updateParent() {
        // 执行数据库更新逻辑
        // 调用回调刷新父组件表格
        this.updateSuccessCallback?.();
        this.activeModal.close();
    }
}

优先选择第一种方案，父子组件耦合度更低，子组件只需要返回操作状态，不需要感知父组件的具体业务逻辑，后续复用、维护更方便。

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