调用 NgbModal open 方法的最佳实践
Best practice for calling the NgbModal open method
玩弄 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)}`;
});
}
代码运行没有错误,模式打开如下:
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>
`;
我错过了什么?难道不能只传递一个字符串作为 "content" 参数吗?
我也不知道如何使用 ts 文件中的 templateRef 参数!
截至今天,https://ng-bootstrap.github.io/#/components/modal 的 open
方法具有以下签名:open(content: string | TemplateRef<any>, options: NgbModalOptions)
。从这个签名可以看出,您可以打开一个提供内容的模态:
string
TemplateRef
string
类型的参数不是很有趣 - 事实上,它主要是为了帮助调试/单元测试而添加的。通过使用它,您可以只传递......好吧,一段文本,没有任何标记而不是 Angular 指令。因此,它实际上是一个调试工具,而不是在现实生活中有用的东西。
TemplateRef
参数更有趣,因为它允许您传递要显示的标记 + 指令。您可以通过在组件模板(您计划从中打开模态的组件模板)中的某处执行 <template #refVar>...content goes here...</template>
来获得 TemplateRef
的帮助。因此 TemplateRef
参数非常强大,因为它允许您拥有标记、指令、其他组件等。缺点是 TemplateRef
仅在您从带有模板的组件打开模式时才有用。
我的印象是您正在寻找已计划但尚未实现的功能 - 能够打开以组件类型作为内容的模式。它将按如下方式工作:modalService.open(MyComponentWithContent)
。正如我所提到的,这是路线图的一部分,但尚未实施。您可以通过关注 https://github.com/ng-bootstrap/ng-bootstrap/issues/680
来跟踪此功能
您现在可以执行以下操作...
假设你有一个模型组件确认模型你想在任何其他组件中使用它。
- ModelComponentName 添加到 module.ts
中的 declarations 和 entryComponent 部分
- 不要忘记在包含上述声明的模块文件的导入中添加 NgbModule.forRoot()。
确保您的模型组件模板在 div 标签内而不是
ng-模板标签。
然后您可以从任何其他组件使用以下打开方法。
modalReference: NgbModalRef;
constructor(private modalService: NgbModal) { }
this.modalReference = this.modalService.open(ModelComponentName, {backdrop: 'static',size: 'lg', keyboard: false, centered: true});
玩弄 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)}`;
});
}
代码运行没有错误,模式打开如下: 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>
`;
我错过了什么?难道不能只传递一个字符串作为 "content" 参数吗?
我也不知道如何使用 ts 文件中的 templateRef 参数!
截至今天,https://ng-bootstrap.github.io/#/components/modal 的 open
方法具有以下签名:open(content: string | TemplateRef<any>, options: NgbModalOptions)
。从这个签名可以看出,您可以打开一个提供内容的模态:
string
TemplateRef
string
类型的参数不是很有趣 - 事实上,它主要是为了帮助调试/单元测试而添加的。通过使用它,您可以只传递......好吧,一段文本,没有任何标记而不是 Angular 指令。因此,它实际上是一个调试工具,而不是在现实生活中有用的东西。
TemplateRef
参数更有趣,因为它允许您传递要显示的标记 + 指令。您可以通过在组件模板(您计划从中打开模态的组件模板)中的某处执行 <template #refVar>...content goes here...</template>
来获得 TemplateRef
的帮助。因此 TemplateRef
参数非常强大,因为它允许您拥有标记、指令、其他组件等。缺点是 TemplateRef
仅在您从带有模板的组件打开模式时才有用。
我的印象是您正在寻找已计划但尚未实现的功能 - 能够打开以组件类型作为内容的模式。它将按如下方式工作:modalService.open(MyComponentWithContent)
。正如我所提到的,这是路线图的一部分,但尚未实施。您可以通过关注 https://github.com/ng-bootstrap/ng-bootstrap/issues/680
您现在可以执行以下操作...
假设你有一个模型组件确认模型你想在任何其他组件中使用它。
- ModelComponentName 添加到 module.ts 中的 declarations 和 entryComponent 部分
- 不要忘记在包含上述声明的模块文件的导入中添加 NgbModule.forRoot()。
确保您的模型组件模板在 div 标签内而不是 ng-模板标签。
然后您可以从任何其他组件使用以下打开方法。
modalReference: NgbModalRef;
constructor(private modalService: NgbModal) { }
this.modalReference = this.modalService.open(ModelComponentName, {backdrop: 'static',size: 'lg', keyboard: false, centered: true});