如何实现MAT_DIALOG_DEFAULT_OPTIONS？

Question

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

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

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

I applied these code with some other, but it doesn't work. The settings doesn't applied at all.

有人能使这些设置起作用吗？

Answer 1

有效...转到 here 并添加这些以验证它。

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

....

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

Answer 2

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' //设置文本从哪里开始 - 从左到右。

Answer 3

感谢@Fartab，我看到了我的问题，angular 示例以下列方式打开对话框：

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 4

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 5

我们可以通过在对话框选项中添加 hasBackdrop 和 disableClose 属性来禁用 angular material 对话框背景。

openDialog(tabIndex, paramIndex){
const dialogRef = this.dialog.open(TabChangeDialogboxComponent,{
  width: '330px',
  height: '200px',
  hasBackdrop: true, //Here line to add
  disableClose: true,//Here line to add
  data: {
    tabInd: tabIndex,
    paramInd: paramIndex 
  }
});

Answer 6

以防万一，如果有人仍然需要帮助，请按照此模式获取 mat 对话框默认选项。

module.ts

{ provide: MAT_DIALOG_DEFAULT_OPTIONS,
  useValue: { hasBackdrop: true, disableClose: true } as MatDialogConfig
}

您想打开对话框的任何组件。

const dialogConfig: MatDialogConfig = {}; // important to use this method.
dialogConfig.panelClass = 'no-padding-dialog';
// Any additional dialog configs
this.dialog.open(YourComponent, dialogConfig);

当您必须应用默认配置时避免使用以下内容，因为它会创建对话框配置的新实例。

const dialogConfig = new MatDialogConfig(); // Don`t use

如何实现MAT_DIALOG_DEFAULT_OPTIONS？

How to implement MAT_DIALOG_DEFAULT_OPTIONS?

angular-material2

angular