如何从组件打开 ng-template 模态？

Question

我有一个用 ng-template 包裹的模态，

<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Modal for user id : {{ modalService.config.initialState.id }}</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    This is a modal.
  </div>
</ng-template>

我有一个按钮可以打开这个模式，例如

<button type="button" class="btn btn-primary" (click)="openModal(template)">Create template modal</button>

openModal(template: TemplateRef<any>) {
    const user = {
        id: 10
      };
    this.modalRef = this.modalService.show(template, {
      initialState : user
    });
}

当我将模板作为参数传递时，这将起作用。

如何在不传递参数的情况下打开此模式？就这样吧，我没有按钮，我想在 ngOninit 上打开模式。怎么可能呢？

堆栈位块传送

Answer 1

使用装饰器在打字稿中获取模板的引用@ViewChild()，并使用ngAfterViewInit()钩子打开模式。

@ViewChild('template') templateRef: TemplateRef<any>;

ngAfterViewInit() {
  const user = {
      id: 10
    };
  this.modalRef = this.modalService.show(this.templateRef, {
    initialState : user
  });
}

https://stackblitz.com/edit/angular-modal-bootstap-pay2ua?file=app%2Fapp.component.ts

编辑

ExpressionChangedAfterItHasBeenCheckedError我只是注意到，如果我们在钩子中显示它，我们会得到一个ngAfterViewInit()，以修复在一个中打开模式的包装setTimeuut()

setTimeout(() => {
    this.modalRef = this.modalService.show(this.templateRef, {
      initialState : user
   })
})

https://stackblitz.com/edit/angular-modal-bootstap-pr377t?file=app/app.component.ts