是否可以覆盖@Component.providers 中的默认对话框选项？答案

【问题标题】：Is it posiible to overwrite default dialog options in @Component.providers?是否可以覆盖@Component.providers 中的默认对话框选项？
【发布时间】：2020-11-03 13:00:04
【问题描述】：

我想创建一个没有背景的共享对话框（默认情况下）。我已经在这个对话框的 @Component 装饰器中覆盖了 MatDialogConfig 注入令牌，如下所示：

@Component({
    ...
    providers: [{ provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: { hasBackdrop: false } }]
})
class DialogComponent { }

但是，它不起作用：stackblitz example。我不想在模块声明中这样做，因为它将应用于此模块中的所有对话框，这不是我想要的。

我也不想每次使用都写{ hasBackdrop: false }。

是否可以仅针对此对话框执行此操作，还是必须按模块指定此注入令牌？

【问题讨论】：

标签： angular angular-material dialog

【解决方案1】：

如果您只想为跨不同组件的某些对话框设置默认选项，我建议将常量声明为

export const DEFAULT_DIALOG_OPTIONS = { hasBackdrop: false };

然后，每当您调用 open 方法时，您都可以使用扩展运算符覆盖传递给它的选项。

this._dialog.open(MyDialogComponent, { ...dialogOptions, ...DEFAULT_DIALOG_OPTIONS });

更新 2

如果您不需要每次都指定对话框选项，并且仍然希望每次打开 MyDialogComponent 时都传递一个全局选项，我建议您创建一个可注入服务

@Injectabl()
class MyDialogServic {
  constructor(dialog: MatDialog) {}

  methodToOpenDialog() {
    this.dialog.open(MyDialogComponent, { hasBackDrop: false })
  }
}

现在您可以将此服务注入任何组件，并在可能注入此服务的任何其他组件中调用其methodToOpenDialog。

【讨论】：

相当于每次使用这个对话框时都写{ hasBackdrop: false }。我不想指定对话框选项。