Question

使用NgbModal进行游戏，并希望触发open方法 - ＆gt; open(content: string | TemplateRef<any>, options: NgbModalOptions)＆lt; - 来自模板代码之外的其他地方。在我的情况下，我想在我的组件的.ts文件中运行方法时传递一个字符串作为参数。当通过html文件中的按钮运行方法时，如<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参数！

Answer 1

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

string
TemplateRef

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

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

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

跟踪此功能

Answer 2

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

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

将ModelComponentName添加到module.ts中的声明和entryComponent部分中。
别忘了在模块文件的导入中添加NgbModule.forRoot（），其中包含上面提到的声明。
确保模型组件模板位于div标签内，而不是 ng-template标记。

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

modalReference：NgbModalRef; 构造函数（private modalService：NgbModal）{} this.modalReference = this.modalService.open（ModelComponentName，{backdrop：'static'，size：'lg'，keyboard：false，居中：true}）;

调用NgbModal open方法的最佳实践

2 个答案: