EDIT:
您还可以在组件的 HTML 文件（或更常见的“组件视图”）中使用模板引用，然后在组件的 TypeScript 文件中引用它，然后将该引用传递给MatDialog#open.
或者，您可以在组件视图中访问模板的引用，然后将其传递给您定义的接受该引用的方法。
如果您对我刚刚输入的内容感到困惑，请查看下面的代码（第一个对话框演示了第一句话，第二个对话框展示了我在第二句中解释的内容）
（再次假设以下结构）
app/
app.component.html
app.component.ts
app.component.html:
<button mat-button (click)="openDialogWithRef(firstDialog)">Open dialog with reference</button>
<button mat-button (click)="openOtherDialog()">Open dialog in code</button>
<ng-template #firstDialog>
<h2 matDialogTitle>Hello, world!</h2>
<p matDialogContent><em>Content for this dialog goes here...</em></p>
<mat-dialog-actions align="end">
<button mat-button matDialogClose>Dismiss</button>
</mat-dialog-actions>
</ng-template>
<ng-template #secondDialog>
<h2 matDialogTitle>Hello, second dialog!</h2>
<p matDialogContent>Interesting note: This template reference was referenced in code with the <code>@ViewChild</code>, which lets you query components/template references in the component view.</p>
<mat-dialog-actions align="end">
<button mat-button matDialogClose>Dismiss</button>
</mat-dialog-actions>
app.component.ts（缩短）：
import { ViewChild, TemplateRef } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
// ...
export class AppComponent {
@ViewChild('secondDialog') secondDialog: TemplateRef<any>;
constructor(private dialog: MatDialog) { }
openDialogWithRef(ref: TemplateRef<any>) {
this.dialog.open(ref);
}
openOtherDialog() {
this.dialog.open(this.secondDialog);
}
}
此方法可以为您节省一些为对话框创建新组件以及在模块中声明它们的麻烦。entryComponents.
但是，如果单个组件视图中有多个对话框模板，这很快就会变得很麻烦。
原答案
这是您要求的一个简单示例：
（假设以下结构）
app/
my-alert-dialog/
my-alert-dialog.component.html
my-alert-dialog.component.ts
app.component.ts
app.module.ts
my-alert-dialog.component.html
<h2 matDialogTitle>Unregister?</h2>
<mat-dialog-content>
<p>When you unregister, all your data will be removed. Continue?</p>
</mat-dialog-content>
<mat-dialog-actions align="end">
<!--
Note that you can pass in anything to the `matDialogClose` attribute. This also includes objects, arrays, etc.
Just make sure that you make it a property binding with those [] brackets
Example: <button mat-button [matDialogClose]="{'lol': true}">Cancel</button>
-->
<button mat-button matDialogClose="cancel" color="primary">Cancel</button>
<button mat-button matDialogClose="confirm" color="warn">Unregister</button>
</mat-dialog-actions>
上述代码的解释：
-
[matDialogTitle] / [mat-dialog-title]：指令（通常用于h2元素）用于指示对话框的标题。
-
[matDialogContent] / [mat-dialog-content] / mat-dialog-content：指示对话框内容的指令。
-
[matDialogActions] / [mat-dialog-actions] / mat-dialog-actions：指示对话框操作的指令。
-
[matDialogClose] / [mat-dialog-close]：指令（通常用于button元素）指示单击该元素时应关闭对话框。或者，该指令可以包含一个参数（anytype），然后可以将其传递给打开此对话框的组件。
my-alert-dialog.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-alert-dialog', // Replace with your own selector
templateUrl: './my-alert-dialog.component.html'
})
export class MyAlertDialogComponent { }
app.component.ts（已编辑）
import { MatDialog } from '@angular/material';
import { MyAlertDialogComponent } from './my-alert-dialog/my-alert-dialog.component';
// ...
export class AppComponent {
constructor(private dialog: MatDialog) { }
unregister() {
let dialogRef = this.dialog.open(MyAlertDialogComponent);
dialogRef.afterClosed().subscribe(result => {
// NOTE: The result can also be nothing if the user presses the `esc` key or clicks outside the dialog
if (result == 'confirm') {
console.log('Unregistered');
}
})
}
}
app.module.ts（已编辑）
import { MatDialogModule } from '@angular/material';
import { MyAlertDialogComponent } from './my-alert-dialog/my-alert-dialog.component';
@NgModule({
declarations: [
// ...
MyAlertDialogComponent
],
imports: [
// ...
MatDialogModule
],
entryComponents: [
// See https://material.angular.io/components/dialog/overview#configuring-dialog-content-via-code-entrycomponents-code- for more info
MyAlertDialogComponent
]
})
export class AppModule { }
Demo https://stackblitz.com/edit/simple-dialog-so
