NG-bootstrap：通过一键式处理程序在不同组件中打开多个模式答案

【问题标题】：NG-bootstrap : open multiple modals in separate components from one click handlerNG-bootstrap：通过一键式处理程序在不同组件中打开多个模式
【发布时间】：2020-05-03 12:19:00
【问题描述】：

我最初有一个 ng-bootstrap (5.1.4) 模式和在我的页面模板中内联打开它的按钮，如下所示：

    <ng-template #basicMessage
                 let-modal>
      <div class="modal-header">
        <h2 id="modal-basic-title"
            class="modal-title">Modal headline</h2>
        <button type="button"
                class="close"
                aria-label="Close"
                (click)="modal.dismiss('Close icon clicked')">
          <span aria-hidden="true"></span>
        </button>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, duo ei volumus perfecto ocurreret, nam et volutpat explicari hendrerit.</p>
      </div>
    </ng-template>

    <button class="btn btn-primary mb-3"
            (click)="open(basicMessage, { ariaLabelledBy: 'modal-basic-title' })"
            matRipple>
      View Demo
    </button>

这个页面有几个这样的模态演示，每个都有不同的模板标签，例如#singleChoiceActionModal和#basicMessage。

现在我想将每个模态移动到它自己的组件中，并从 viewdemo 按钮调用模态，传递要打开的演示的名称。问题是，一旦我将上述模态 ng-template 移动到它自己的组件中：

import { Component } from '@angular/core';

@Component({
  selector: 'app-ngmodal-basic',
  template: `
    <ng-template #basicMessage let-modal>
      <div class="modal-header">
        <h2 id="modal-basic-title" class="modal-title">Modal headline</h2>
        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Close icon clicked')">
          <span aria-hidden="true"></span>
        </button>
      </div>
      <div class="modal-body">
        <p>
          Lorem ipsum dolor sit amet, duo ei volumus perfecto ocurreret, nam et volutpat explicari hendrerit.
        </p>
      </div>
    </ng-template>
  `,
  styles: []
})
export class NgmodalBasicComponent {}

然后将该组件添加到我的演示页面中，如

    <app-ngmodal-basic></app-ngmodal-basic>

    <button class="btn btn-primary mb-3"
            (click)="open(basicMessage, { ariaLabelledBy: 'modal-basic-title' })"
            matRipple>
      View Demo
    </button>

背景弹出，但没有模态。

由于这有点混乱，我做了一个 Stackblitz：https://stackblitz.com/edit/angular-rvsxpz

【问题讨论】：

标签： javascript angular bootstrap-modal ng-bootstrap

【解决方案1】：

您必须将模板引用传递给 open 方法的第一个参数。但是在您的示例中，您正在传递 undefined 这就是它不起作用的原因。您必须先获取 app-ngmodal-basic 模板引用，然后将该引用传递给 open 方法。要获取 app-ngmodal-basic 模板引用，请使用 ViewChild，然后在 app-ngmodal-basic 上添加模板变量以获取访问权限

试试这个

ng-model-basic.component.ts

export class NgmodalBasicComponent {
  @ViewChild("basicMessage", { static: false })
  public basicMessage: TemplateRef<any>;
  constructor() {}
}

hello.component.html

<app-ngmodal-basic #modal></app-ngmodal-basic>

   <button class="btn btn-primary my-5 d-block"
                (click)="open(modal.basicMessage, { ariaLabelledBy: 'modal-basic-title' })"
                matRipple>
         Open Basic Message Modal
    </button>

Forked Example

【讨论】：