在 Angular Material 自定义对话框中显示组件
Showing a component in Angular Material Custom Dialog
我有一个可重复使用的自定义 Material UI 对话框,我想在其中显示不同的组件。
例如一次调用它并显示一个登录组件,另一次显示一个注册组件,这只是示例。
问题是当我将我的组件分配给主体(主体:InvitationComponent)时,结果是一个正确的对话框,但主体(或内容)是我的组件的代码。当您发送文本时,没问题,但是当我想发送一个组件以显示在对话框中间时,这是不可能的。问题是如何将组件作为对象或模板发送到对话框中显示?
邀请组件由 shome html 代码和输入控件以及一个按钮组成,我想在对话框中间显示它。 (例如我们可以在 iframe 中显示的页面)
预先感谢您的帮助。
<div class="title">
<h2 mat-dialog-title>{{ data.title }}</h2>
<span mat-dialog-close class="material-icons closeButton">close</span>
</div>
<hr>
<div>
<mat-dialog-content class="mat-typography">
{{ data.body }}
</mat-dialog-content>
<hr>
<div class="actionSection">
<mat-dialog-actions>
<button mat-button class="secondary" mat-dialog-close>{{ data.cancelButton }}</button>
</mat-dialog-actions>
</div>
</div>
</div>
my calling code is:
const dialogRef = this.dialogService.open(CustomDialogComponent,
{
hasBackdrop: true,
disableClose:true,
data:{
title: 'Invite User',
body: InvitationComponent,
cancelButton: 'Close' }
那是我的 CustomDialogComponent:
export class CustomDialogComponent implements OnInit {
constructor(@Inject(MAT_DIALOG_DATA) public data: any,
private dialogRef: MatDialogRef<CustomDialogComponent>) {
console.log(data.body);
}
ngOnInit() {
}
您可以在通用对话框组件中只使用两个不同的模板 html 并根据调用呈现其中的任何一个。
为了更好地理解,我做了一个 stackblitz 示例:https://stackblitz.com/edit/angular-mat-dialog-kfdktu
我有一个可重复使用的自定义 Material UI 对话框,我想在其中显示不同的组件。 例如一次调用它并显示一个登录组件,另一次显示一个注册组件,这只是示例。
问题是当我将我的组件分配给主体(主体:InvitationComponent)时,结果是一个正确的对话框,但主体(或内容)是我的组件的代码。当您发送文本时,没问题,但是当我想发送一个组件以显示在对话框中间时,这是不可能的。问题是如何将组件作为对象或模板发送到对话框中显示? 邀请组件由 shome html 代码和输入控件以及一个按钮组成,我想在对话框中间显示它。 (例如我们可以在 iframe 中显示的页面) 预先感谢您的帮助。
<div class="title">
<h2 mat-dialog-title>{{ data.title }}</h2>
<span mat-dialog-close class="material-icons closeButton">close</span>
</div>
<hr>
<div>
<mat-dialog-content class="mat-typography">
{{ data.body }}
</mat-dialog-content>
<hr>
<div class="actionSection">
<mat-dialog-actions>
<button mat-button class="secondary" mat-dialog-close>{{ data.cancelButton }}</button>
</mat-dialog-actions>
</div>
</div>
</div>
my calling code is:
const dialogRef = this.dialogService.open(CustomDialogComponent,
{
hasBackdrop: true,
disableClose:true,
data:{
title: 'Invite User',
body: InvitationComponent,
cancelButton: 'Close' }
那是我的 CustomDialogComponent:
export class CustomDialogComponent implements OnInit {
constructor(@Inject(MAT_DIALOG_DATA) public data: any,
private dialogRef: MatDialogRef<CustomDialogComponent>) {
console.log(data.body);
}
ngOnInit() {
}
您可以在通用对话框组件中只使用两个不同的模板 html 并根据调用呈现其中的任何一个。 为了更好地理解,我做了一个 stackblitz 示例:https://stackblitz.com/edit/angular-mat-dialog-kfdktu