angular – 调用NgbModal open方法的最佳实践

玩弄 NgbModal并想要触发打开方法 – > open(content：string | TemplateRef< any>,options：NgbModalOptions)< - 来自模板代码以外的其他地方.在我的情况下,我想在我的组件的.ts文件中运行方法时传递一个字符串作为参数.当通过html文件中的按钮运行方法时,如下所示：< button(click)=“open(content)”>启动演示模式< / button>,代码效果很好,当然包含来自内部的所有代码< template>< / template>在html文件中.

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

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
……这不是我想要的！@H_404_2@

也尝试这样,结果完全相同：@H_404_2@

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

我错过了什么？是不是可以只传递一个字符串作为“内容”参数？@H_404_2@

无法看到如何使用ts文件中的templateRef参数！@H_404_2@

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

>字符串
> TemplateRef@H_404_2@

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

TemplateRef参数更有趣,因为它允许您传递要显示的标记指令.您可以通过执行< template #refVar>来获取TemplateRef …内容到此处…< / template>组件模板中的某个位置(计划打开模态的组件模板).因此,TemplateRef参数功能强大,因为它允许您使用标记,指令,其他组件等.缺点是只有在从带有模板的组件中打开模态时,TemplateRef才有用.@H_404_2@

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

angular – 调用NgbModal open方法的最佳实践

相关文章