NG-bootstrap :通过单击处理程序在单独的组件中打开多个模式
NG-bootstrap : open multiple modals in separate components from one click handler
我最初有一个 ng-bootstrap (5.1.4) 模态和在我的页面模板中内联打开它的按钮,如下所示:
<ng-template #basicMessage
let-modal>
<div class="modal-header">
<h2 id="modal-basic-title"
class="modal-title">Modal headline</h2>
<button type="button"
class="close"
aria-label="Close"
(click)="modal.dismiss('Close icon clicked')">
<span aria-hidden="true"></span>
</button>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, duo ei volumus perfecto ocurreret, nam et volutpat explicari hendrerit.</p>
</div>
</ng-template>
<button class="btn btn-primary mb-3"
(click)="open(basicMessage, { ariaLabelledBy: 'modal-basic-title' })"
matRipple>
View Demo
</button>
此页面有多个模态演示,每个都有不同的模板标签,例如 #singleChoiceActionModal
和 #basicMessage
。
现在我想将每个模式移动到它自己的组件中,并从 viewdemo 按钮调用模式,传递要打开的演示的名称。问题是,一旦我将上面的模式 ng-template 移动到它自己的组件中:
import { Component } from '@angular/core';
@Component({
selector: 'app-ngmodal-basic',
template: `
<ng-template #basicMessage let-modal>
<div class="modal-header">
<h2 id="modal-basic-title" class="modal-title">Modal headline</h2>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Close icon clicked')">
<span aria-hidden="true"></span>
</button>
</div>
<div class="modal-body">
<p>
Lorem ipsum dolor sit amet, duo ei volumus perfecto ocurreret, nam et volutpat explicari hendrerit.
</p>
</div>
</ng-template>
`,
styles: []
})
export class NgmodalBasicComponent {}
然后将此组件添加到我的演示页面,如
<app-ngmodal-basic></app-ngmodal-basic>
<button class="btn btn-primary mb-3"
(click)="open(basicMessage, { ariaLabelledBy: 'modal-basic-title' })"
matRipple>
View Demo
</button>
弹出背景但没有模态。
由于这有点令人困惑,我做了一个 Stackblitz:https://stackblitz.com/edit/angular-rvsxpz
您必须将模板引用传递给 open 方法的第一个参数。但是在您的示例中,您传递的是未定义的,这就是它不起作用的原因。您必须先获取 app-ngmodal-basic 模板引用,然后将该引用传递给 open 方法。要获取 app-ngmodal-basic 模板引用,请使用 ViewChild,然后在 app-ngmodal-basic 上添加模板变量以获取访问权限
试试这个
ng-模型-basic.component.ts
export class NgmodalBasicComponent {
@ViewChild("basicMessage", { static: false })
public basicMessage: TemplateRef<any>;
constructor() {}
}
hello.component.html
<app-ngmodal-basic #modal></app-ngmodal-basic>
<button class="btn btn-primary my-5 d-block"
(click)="open(modal.basicMessage, { ariaLabelledBy: 'modal-basic-title' })"
matRipple>
Open Basic Message Modal
</button>
我最初有一个 ng-bootstrap (5.1.4) 模态和在我的页面模板中内联打开它的按钮,如下所示:
<ng-template #basicMessage
let-modal>
<div class="modal-header">
<h2 id="modal-basic-title"
class="modal-title">Modal headline</h2>
<button type="button"
class="close"
aria-label="Close"
(click)="modal.dismiss('Close icon clicked')">
<span aria-hidden="true"></span>
</button>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, duo ei volumus perfecto ocurreret, nam et volutpat explicari hendrerit.</p>
</div>
</ng-template>
<button class="btn btn-primary mb-3"
(click)="open(basicMessage, { ariaLabelledBy: 'modal-basic-title' })"
matRipple>
View Demo
</button>
此页面有多个模态演示,每个都有不同的模板标签,例如 #singleChoiceActionModal
和 #basicMessage
。
现在我想将每个模式移动到它自己的组件中,并从 viewdemo 按钮调用模式,传递要打开的演示的名称。问题是,一旦我将上面的模式 ng-template 移动到它自己的组件中:
import { Component } from '@angular/core';
@Component({
selector: 'app-ngmodal-basic',
template: `
<ng-template #basicMessage let-modal>
<div class="modal-header">
<h2 id="modal-basic-title" class="modal-title">Modal headline</h2>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Close icon clicked')">
<span aria-hidden="true"></span>
</button>
</div>
<div class="modal-body">
<p>
Lorem ipsum dolor sit amet, duo ei volumus perfecto ocurreret, nam et volutpat explicari hendrerit.
</p>
</div>
</ng-template>
`,
styles: []
})
export class NgmodalBasicComponent {}
然后将此组件添加到我的演示页面,如
<app-ngmodal-basic></app-ngmodal-basic>
<button class="btn btn-primary mb-3"
(click)="open(basicMessage, { ariaLabelledBy: 'modal-basic-title' })"
matRipple>
View Demo
</button>
弹出背景但没有模态。
由于这有点令人困惑,我做了一个 Stackblitz:https://stackblitz.com/edit/angular-rvsxpz
您必须将模板引用传递给 open 方法的第一个参数。但是在您的示例中,您传递的是未定义的,这就是它不起作用的原因。您必须先获取 app-ngmodal-basic 模板引用,然后将该引用传递给 open 方法。要获取 app-ngmodal-basic 模板引用,请使用 ViewChild,然后在 app-ngmodal-basic 上添加模板变量以获取访问权限
试试这个
ng-模型-basic.component.ts
export class NgmodalBasicComponent {
@ViewChild("basicMessage", { static: false })
public basicMessage: TemplateRef<any>;
constructor() {}
}
hello.component.html
<app-ngmodal-basic #modal></app-ngmodal-basic>
<button class="btn btn-primary my-5 d-block"
(click)="open(modal.basicMessage, { ariaLabelledBy: 'modal-basic-title' })"
matRipple>
Open Basic Message Modal
</button>