调用 NgbModal 打开方法的最佳实践答案

【问题标题】：Best practice for calling the NgbModal open method调用 NgbModal 打开方法的最佳实践
【发布时间】：2017-01-20 17:16:07
【问题描述】：

玩弄NgbModal 并想从模板代码之外的其他地方触发打开方法-> open(content: string | TemplateRef<any>, options: NgbModalOptions) <button (click)="open(content)">Launch demo modal</button>，代码运行良好，当然所有代码都来自 html 文件中的<template></template>。

试图用这个来完成一些事情：

logoutScreenOptions: NgbModalOptions = {
    backdrop: 'static',
    keyboard: false
};

lockedWindow: NgbModalRef;

lockedScreenContent= `
    <template #content let-c="close" let-d="dismiss">
        <div class="modal-header" style="text-align: center">
            <h3 class="modal-title">Title</h3>
        </div>
        <div class="modal-body">
            <p>Body</p>
        </div>
        <div class="modal-footer">
            <p>Footer</p>
        </div>
    </template>
`;

openLockedScreen(){
    this.open(this.lockedScreenContent);
}

open(content) {
    console.log(content);
    this.lockedWindow = this.modalService.open(content, this.logoutScreenOptions);
    this.lockedWindow.result.then((result) => {
        this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
}

代码运行没有错误，模式打开如下： Modal without rendered content ...这不是我想要的！

也这样尝试，结果一模一样：

lockedScreenContent= `
    <div class="modal-header" style="text-align: center">
        <h3 class="modal-title">Title</h3>
    </div>
    <div class="modal-body">
        <p>Body</p>
    </div>
    <div class="modal-footer">
        <p>Footer</p>
    </div>
`;

我错过了什么？难道不能只传递一个字符串作为“内容”参数吗？

我也无法理解如何使用 ts 文件中的 templateRef 参数！

【问题讨论】：

标签： angular modal-dialog ng-bootstrap

【解决方案1】：

截至今天，https://ng-bootstrap.github.io/#/components/modal 的 open 方法具有以下签名：open(content: string | TemplateRef<any>, options: NgbModalOptions)。正如您从这个签名中看到的，您可以打开一个提供内容的模式：

string
TemplateRef

string-typed 参数不是很有趣——事实上，它主要是为了帮助调试/单元测试而添加的。通过使用它，您可以传递...好吧，一段文本，没有任何标记而不是 Angular 指令。因此，它实际上是一个调试工具，而不是在现实生活场景中有用的东西。

TemplateRef 参数更有趣，因为它允许您传递要显示的标记 + 指令。您可以通过在组件模板（您计划从中打开模式的组件模板）中的某处执行<template #refVar>...content goes here...</template> 来获得TemplateRef。因此TemplateRef 参数非常强大，因为它允许您拥有标记、指令、其他组件等。缺点是TemplateRef 只有在您从带有模板的组件中打开模式时才有用。

我的印象是您正在寻找已计划但尚未实现的功能 - 能够以组件类型作为内容打开模式。它将按如下方式工作：modalService.open(MyComponentWithContent)。正如我所提到的，这是路线图的一部分，但尚未实施。您可以通过关注https://github.com/ng-bootstrap/ng-bootstrap/issues/680

来跟踪此功能

【讨论】：

感谢您把事情说清楚！然后会按照github线程中的流程进行。
只是为了更新，作为内容的组件已经实现。链接的文档也已更新
如何捕捉打开的 modalRef 状态？

【解决方案2】：

您现在可以执行以下操作...

假设您有一个模型组件，请确认您想在任何其他组件中使用它的模型。

ModelComponentName 被添加到 module.ts 中的声明和 entryComponent 部分
不要忘记在包含上述声明的模块文件的导入中添加 NgbModule.forRoot()。
确保您的模型组件模板位于 div 标签内，而不是 ng-template 标签。

然后您可以从任何其他组件使用以下打开方法。

modalReference: NgbModalRef;
constructor(private modalService: NgbModal) { }
this.modalReference = this.modalService.open(ModelComponentName, {backdrop: 'static',size: 'lg', keyboard: false, centered: true});

【讨论】：