Angular 将 EventListener 添加到组件只工作一次

问：

我有一个 Angular 应用程序，其中多个组件（假设 A、B、C）使用一个共同的较小组件（假设 M）。M 基本上是一个引导模式，我试图向它添加事件侦听器。我尝试绑定的事件侦听器是 Bootstrap 事件 show.bs.modal，所以我不能使用 Angular 提供的通常的事件绑定方式。我是通过以下方式做到这一点的

ngOnInit(): void{
  let myModal = document.getElementByid("MyModal")
  myModal?.addEventListener("show.bs.modal", ()=>{
    console.log("I'm open")
  })
}

我在第一次绑定时成功了，如果我在 A 中打开 M，我可以触发事件。但是，如果我切换到 B 或 C，或者从 B 或 C 切换回 A，则该事件侦听器似乎消失了。如果我在 B 或 C 中打开 M，或者在从 B 或 C 返回后打开 A，则无法触发该事件。

我搜索了问题的原因，但没有那么成功。我看到很多人说你应该在ngAfterViewInit中绑定事件侦听器，但我也尝试过，它没有给我不同的结果。代码基本相同：

ngAfterViewInit(): void{
  let myModal = document.getElementByid("MyModal")
  myModal?.addEventListener("show.bs.modal", ()=>{
    console.log("I'm open")
  })
}

那么，这些事件侦听器发生了什么？如果我希望事件侦听器无论何时何地都与 M 在一起，我应该怎么做？谢谢！