angular - 如何从另一个组件打开 ng bootstrap modals？

Question

我想在组件 1 的帮助下从另一个模块打开或关闭模态。但是目前我无法访问该组件中模态的 ngBootstrap 的 modalRef，以便我可以关闭/打开它。

假设这个场景

一个模块

<component1></component1>

另一个模块 这个模块有多个组件，每个组件都有模态，我需要根据组件 1 的条件显示或隐藏。

<component2> //have ng bootstrap modal in it </component2>
<component3> //have ng bootstrap modal in it </component3>
<component4> //have ng bootstrap modal in it </component4>
<component5> //have ng bootstrap modal in it </component5>
<component6> //have ng bootstrap modal in it </component6>

目前我只是通过在该模块中放置一个隐藏按钮并使用来自另一个组件的 JavaScript 单击它来实现这一点，我知道这不是一个好方法所以我希望有人给我一些调用这些模态的方法或告诉我设计是否有任何更改。

据我所知，我认为服务会很好地做到这一点。但在改变设计之前，我想听听别人的意见。谢谢

Answer 1

我刚刚遇到了同样的问题并发现了这个线程，Aniruddha Das 在强调基本要求方面做得很好，但我发现它错过了 TemplateRef 用法，它是接下来，以防万一其他人有这个问题，我会完成它。使用与 Aniruddha 相同的模型

模板:

<ng-template #updatemodal>
  <div class="modal">
    stuff here...
  </div>
</ng-template>

组件:

@ViewChild('updatemodal')
private modalRef: TemplateRef<any>;

private myModal<any>;

constructor(SomeService: SomeService, modalService: NgbModal){
  this.SomeService.popup.subscribe((val)=>{
     if(val === 'open') {
       this.myModal = this.modalService.open(this.modalRef);
     }
   });
}

引用已创建的模态是在响应中允许更多使用和灵 active 的好方法，并使用:

this.myModal.result.then((result) =>{
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });

来自 NgBootstrap网站