调用NgbModal open方法的最佳实践

Question

使用NgbModal并且想要触发open方法 - > open(content: string | TemplateRef<any>, options: NgbModalOptions)< - 来自除模板代码之外的其他地方.在我的情况下,我想在我的组件的.ts文件中运行方法时传递一个字符串作为参数.当通过html文件中的按钮运行方法时,如下所示:<button (click)="open(content)">Launch demo modal</button>代码工作得很好,当然还有<template></template>html文件中的所有代码.

试着用这个来完成一些事情:

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)}`;
    });
}

代码运行没有错误,模态打开如下: 模态没有渲染内容 ......这不是我想要的!

也尝试这样,结果完全相同:

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

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

• string
• TemplateRef

该string-typed说法是不是很有意思-其实它主要是加入到帮助调试/单元测试.通过使用它你可以传递......好吧,一段文字,没有任何标记而不是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

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

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

1. ModelComponentName 添加到 module.ts 中的声明和 EntryComponent 部分
2. 不要忘记在包含上面提到的声明的模块文件的导入中添加 NgbModule.forRoot() 。

3. 确保您的模型组件模板位于 div 标签内，而不是 ng-template 标签内。

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

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