NullInjectorError：没有 MatDialogRef 的提供者

typescript

解决 NullInjectorError：没有 MatDialogRef 的提供者

typescript
import { Component, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
  selector: 'app-dialog-example',
  template: <code>
    <h1>Dialog Example</h1>
    <button (click)="openDialog()">Open Dialog</button>
  </code>
})
export class DialogExampleComponent {
  constructor(public dialog: MatDialog) {}
  openDialog(): void {
    const dialogRef = this.dialog.open(DialogContentComponent, {
      width: '250px',
      data: { name: 'John' }
    });
    dialogRef.afterClosed().subscribe(result => {
      console.log('Dialog closed', result);
      // 执行关闭对话框后的操作
    });
  }
}
@Component({
  selector: 'app-dialog-content',
  template: <code>
    <h2 mat-dialog-title>Dialog Content</h2>
    <mat-dialog-content>
      
Dialog content goes here.
      
Received data: {{ data.name }}
    </mat-dialog-content>
    <mat-dialog-actions>
      <button mat-button (click)="dialogRef.close('Close')">Close</button>
    </mat-dialog-actions>
  </code>
})
export class DialogContentComponent {
  constructor(
    public dialogRef: MatDialogRef<DialogContentComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}
}

在Angular中，事件默认是按照冒泡机制传播的，这意味着事件会从触发事件的元素开始，向上传播到其父级元素，直到根元素。Angular并不直接支持捕获机制，但在绑定事件时可以通过设置$event.stopPropagation()来阻止事件冒泡，或者使用Angular的宿主监听器（HostListener）来实现类似捕获的效果。需要注意的是，Angular的事件处理机制是基于DOM的，而DOM的事件处理机制是支持捕获和冒泡的。