angular2 : 从父组件打开 ng2-bootstrap 模态答案

【问题标题】：angular2 : open ng2-bootstrap modal from parent componentangular2 : 从父组件打开 ng2-bootstrap 模态
【发布时间】：2020-11-08 23:18:00
【问题描述】：

我正在尝试从父组件打开 ng2-bootstrap 模式。我创建了一个 ModalComponent 并且我“exportAs：child”。我的 ModalComponent 看起来像

import { Component, Input, ViewChild } from '@angular/core';
import { ModalDirective } from 'ng2-bootstrap/ng2-bootstrap';

@Component({
    selector: 'modal',
    moduleId: module.id,
    templateUrl: 'modal.component.html',
    styleUrls: ['modal.component.css'],
    exportAs: 'child'
})
export class ModalComponent {

    @ViewChild('childModal') public childModal:ModalDirective;

    public show( variant ):void {

        console.log( this.childModal );
        this.childModal.show();
    }

    public hide():void {

        this.childModal.hide();
    }
}

我在父模板中包含模态

<modal #c="child"></modal>

... 并从父模板调用它为

<button type="button" class="btn btn-primary" (click)="c.show(variant)">open</button>

我正确地点击了 ModalComponent 内的“show”方法，但“childModal”的值始终未定义（Nb：console.log() 语句）。

非常感谢任何指针。

【问题讨论】：

您能发布您的modal.component.html 文件吗？并检查这个 plunker plnkr.co/edit/951NyF20qXudDtZo5OAx?p=preview
谢谢！我检查了你的 plunker，发现我的错误出在 HTML 中，正如你所怀疑的那样。我会在下面写出解决方案。
@yurzui 只是要注意，截至今天 plunker 无法正常工作，显然是由于 ng2-bootstrap 从其<script> 标签加载的方式。 This fork 带有不同的 <script> 标签似乎可以工作。 HTH

标签： angular ng2-bootstrap

【解决方案1】：

在我看来，需要您通过组件和查询模式实例的模式 API 远非最佳。更好的方法是将模态作为服务。通过这种方式，您可以从代码的任何位置（包括服务，例如：登录服务）调用模式上的 open 方法。

这正是在https://ng-bootstrap.github.io/#/components/modal 中将模态API 建模为服务的原因。通过使用它，您可以通过简单地执行modalService.open(....) 从任何位置调用模式。

顺便说一句，基于服务的模态方法也存在于其他 Angular2 小部件库（例如材料设计）中。

简而言之：重新考虑您正在使用的 API。

【讨论】：

完全同意。我一直在考虑使用 ng2-bootstrap，但它让我很困惑，因为它违背了大多数其他库提供模式服务的方式。

【解决方案2】：

在@yurzui 的帮助下，我意识到我的错误在于 HTML。我将我的模态定义为

<div bsModal #smModal="bs-modal"...

Nb: "smModal" 需要改写为

<div bsModal #childModal="bs-modal"...

...瞧！ “childModal”不再是未定义的。

【讨论】：

【解决方案3】：

试试这个

component.ts文件应该如下

import { Component, TemplateRef } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
 
@Component({
  selector: 'demo-modal-service-static',
  templateUrl: './service-template.html'
})
export class DemoModalServiceStaticComponent {
  modalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}
 
  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template);
  }
}

html 应该是

<button type="button" class="btn btn-primary" (click)="openModal(template)">Create template modal</button>
 
<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Modal</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>

【讨论】：