如何隐藏ngx-bootstrap模态框而不销毁模态框组件？

当然可以实现你的需求！默认情况下ngx-bootstrap的模态框关闭时会自动销毁组件，但我们只需要修改一个配置项，就能让组件实例在模态框隐藏时保留下来，后续重新显示时不会重建，同时保证你的服务实例始终是同一个。

核心思路 #

通过设置模态框的destroyOnHide配置为false，让模态框在隐藏时仅做视觉上的隐藏，而不销毁组件实例。之后我们可以通过保存的BsModalRef引用，直接控制模态框的显示和隐藏，无需重新创建组件。

具体代码实现 #

1. 修改AnotherComponent的模态框控制逻辑 #

export class AnotherComponent {
  private modalRef: BsModalRef | undefined;

  constructor(private modalService: BsModalService) {}

  showModal(): void {
    // 仅在模态框未创建时初始化
    if (!this.modalRef) {
      this.modalRef = this.modalService.show(MyComponent, {
        destroyOnHide: false, // 关键配置：关闭时不销毁组件
        backdrop: true, // 可选：保留背景遮罩
        ignoreBackdropClick: false // 可选：允许点击背景关闭模态框
      });
    } else {
      // 已存在实例，直接显示模态框
      this.modalRef.show();
    }
  }

  hideModal(): void {
    this.modalRef?.hide();
  }
}

2. 验证MyComponent的初始化行为 #

你的MyComponent中的ngOnInit只会在第一次创建模态框时执行一次，后续隐藏再显示都不会触发：

@Component({ selector: 'my-component', template: '<p>Hi from my component</p>' })
export class MyComponent implements OnInit {
  ngOnInit(): void {
    console.log('want to show this message only once'); // 只会打印一次！
  }
}

额外注意事项 #

• 资源清理：因为组件实例不会随模态框隐藏而销毁，如果你在组件中有订阅、定时器等资源，记得在ngOnDestroy中手动清理，避免内存泄漏。
• 状态保留：组件的所有状态（包括注入的服务实例）都会被完整保留，再次打开模态框时会维持之前的状态。
• 事件监听：如果需要在模态框显示/隐藏时执行额外逻辑，可以通过BsModalService的onShown和onHidden事件来监听，或者在MyComponent内部处理。

这样就能完全满足你的需求：模态框首次显示后，每次隐藏再打开都不会重建组件，服务实例保持同一，ngOnInit仅执行一次。

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