可以使用Angular Material的mat-dialog组件来实现与多个表单和模板一起工作的需求。下面是一个示例解决方案:
dialog.component.ts:
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@Component({
selector: 'app-dialog',
templateUrl: './dialog.component.html',
styleUrls: ['./dialog.component.css']
})
export class DialogComponent {
constructor(
public dialogRef: MatDialogRef,
@Inject(MAT_DIALOG_DATA) public data: any
) { }
close(): void {
this.dialogRef.close();
}
}
dialog.component.html:
{{ data.title }}
app.component.ts:
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog/dialog.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(public dialog: MatDialog) { }
openDialog(): void {
const dialogRef = this.dialog.open(DialogComponent, {
width: '250px',
data: { title: 'Dialog Title', content: this.dialogContentTemplate }
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
});
}
dialogContentTemplate = `
`;
}
app.component.html:
这样,当点击"Open Dialog"按钮时,会打开一个Dialog,其中包含多个表单和模板。你可以根据自己的需求修改Dialog的样式和内容。