使用样式 mat-dialog-container in TypeScript

在 Angular 中，您可以使用 Material Design 的各种组件。其中一个是 mat-dialog 组件，它可以帮助您创建具有良好外观和感觉的对话框。 在使用 mat-dialog 时，您必须包含 mat-dialog-container 样式类。本文将为您介绍如何使用 mat-dialog-container 样式类。

步骤

1. 导入所需的组件和服务

在您要使用 mat-dialog-container 样式类的组件中，您必须导入所需的组件（例如： MatDialog）和服务（例如： MatDialogModule）

import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { MatDialogModule } from '@angular/material/dialog';

2. 在 html 文件中使用 mat-dialog-container 样式类

下面是一个使用 mat-dialog-container 样式类的例子。在本例中，mat-dialog-container 样式类是将要在对话框中显示的内容的容器。

<h2 mat-dialog-title>Dialog Title</h2>
<mat-dialog-content>
  Dialog Content
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button mat-dialog-close>Close</button>
</mat-dialog-actions>

3. 使用 MatDialog 打开对话框

在您想要打开对话框的组件中，您必须使用 MatDialog 服务执行此操作。请注意，我们还需要 MatDialogRef 帮助我们关闭对话框。

import { Component, Inject } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-my-component',
  template: `
    <button mat-button (click)="openDialog()">Open Dialog</button>
  `
})
export class MyComponent {
  constructor(public dialog: MatDialog) {}

  openDialog() {
    const dialogRef = this.dialog.open(MyDialogComponent);

    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  }
}

@Component({
  selector: 'app-my-dialog',
  template: `
    <h2 mat-dialog-title>Dialog Title</h2>
    <mat-dialog-content>
      Dialog Content
    </mat-dialog-content>
    <mat-dialog-actions>
      <button mat-button mat-dialog-close>Close</button>
    </mat-dialog-actions>
  `
})
export class MyDialogComponent {
  constructor(public dialogRef: MatDialogRef<MyDialogComponent>) {}
}

在此示例中，我们创建了一个对话框组件 MyDialogComponent，并在点击按钮时使用 MatDialog 打开了该对话框。我们可以使用 MatDialogRef 来关闭对话框。

结论

以上介绍了如何使用 mat-dialog-container 样式类在 Angular 中创建对话框。通过使用 MatDialog 和 MatDialogRef，您可以更轻松地创建和管理对话框。