解决 NullInjectorError：Angular 组件中没有 MatDialogRef 的提供程序

Question

我创建了一个 Angular 组件，允许在不使用对话框的情况下创建任务。但是，我还想在对话框中启用任务创建。

当我加载网站时，遇到 NullInjectorError。

错误：

NullInjectorError: R3InjectorError(Standalone[_App])[MatDialogRef -> MatDialogRef -> MatDialogRef]: NullInjectorError: No provider for MatDialogRef!

我知道这个错误是由以下代码行引起的：

private dialogRef: MatDialogRef<TaskFormComponent>

我应该采取哪些步骤来解决此问题并正确注入 MatDialogRef？

堆栈闪电战

任务表单.component.ts

export class TaskFormComponent {
  taskForm!: FormGroup;
  fromPopup = false;

  constructor(
    private dialogRef: MatDialogRef<TaskFormComponent>,
    private taskService: TaskService,
    @Optional()
    @Inject(MAT_DIALOG_DATA)
    public data: { fromPopup: boolean }
  ) {}

  ngOnInit() {
    this.fromPopup = !!this.data?.fromPopup;
    this.taskForm = new FormGroup({
      title: new FormControl(''),
    });
  }

  public onSubmit() {
    if (this.fromPopup) {
      this.dialogRef.close(this.taskForm.getRawValue());
    } else {
      this.taskService.createTask(this.taskForm.getRawValue());
    }
  }
}

main.ts

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TaskFormComponent],
  template: `
  <app-task-form></app-task-form>
  <br><br><br><br>
  <button (click)="createTask()">Create Task</button>
  `,
})
export class App {
  name = 'Angular';

  constructor(private taskDialogService: TaskDialogService) {}

  public createTask() {
    this.taskDialogService.createTask();
  }
}

任务对话框服务.ts

export class TaskDialogService {
  constructor(private taskService: TaskService, private dialog: MatDialog) {}

  public createTask() {
    this.dialog
      .open(TaskFormComponent, {
        data: { fromPopup: true },
      })
      .afterClosed()
      .pipe(filter((task) => task))
      .subscribe((task) => {
        this.taskService.createTask(task);
      });
  }
}

Answer 1

您应该将它们提供到独立的 task-form.component.ts

providers: [
    { provide: MatDialogRef,useValue: {} },
    { provide: MAT_DIALOG_DATA,useValue: {} }
]