Question

在一个项目中，我们有多个对话框。现在，我想将Samen全局变量设置为DialogOption。

我发现：https://material.angular.io/components/dialog/overview 和这段代码：

@NgModule({
  providers: [
    {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}}
  ]
})

我将这些代码与其他代码一起使用，但无法正常工作。的设置根本不适用。

有人可以进行这些设置吗？

Answer 1

那行得通...转到here并添加它们以进行验证。

import {MAT_DIALOG_DEFAULT_OPTIONS} from '@angular/material';

....

providers: [
  {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}}
]

Answer 2

感谢@Fartab，我看到了我的问题，这个有角度的示例以以下方式打开了对话框：

const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
  width: '250px',
  data: {name: this.name, animal: this.animal}
});

但是我以这种方式打开对话框：

const dialogConfig = new MatDialogConfig();
dialogConfig.width = '600px';
dialogConfig.autoFocus = true;
dialogConfig.data = {
  customer: data,
};
const dialogRef = this.dialog.open(DeleteFtpCustomerComponent, dialogConfig);

我认为每次打开对话框时，设置都是从新配置加载的。因此，我将对话框的开头更改为Fartab的示例。现在工作了：）

Answer 3

Angular Material提供了一些配置选项的实际默认值，例如closeOnNavigation，autoFocus等。

如果您只想覆盖一些配置项，而将其余配置保留为默认设置，则可以像这样提供MAT_DIALOG_DEFAULT_OPTIONS：


import {MAT_DIALOG_DEFAULT_OPTIONS, MatDialogConfig} from '@angular/material';

...

  providers: [
    {
      provide: MAT_DIALOG_DEFAULT_OPTIONS,
      useValue: {
        ...new MatDialogConfig(),
        hasBackdrop: false,
      } as MatDialogConfig,
    }
  ]

...

使用这种方法，您只需指定要更改的配置选项。其余的将使用其默认值。

Answer 4

import {
    MAT_DIALOG_DEFAULT_OPTIONS
  } from '@angular/material';

 @NgModule({
    providers: [  
        {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: 
        {hasBackdrop: true, direction: 'ltr',height:'500px'}}
    ]
 })

这样添加会影响默认选项

示例值：

hasBackdrop：true //在对话框外部单击时将不允许关闭对话框。

direction：'ltr'//设置文本将从何处开始-从左到右。

如何实现MAT_DIALOG_DEFAULT_OPTIONS？

4 个答案: