Как реализовать MAT_DIALOG_DEFAULT_OPTIONS?

Question

В проекте у нас несколько диалогов. Теперь я хочу установить для глобальных переменных samen значение DialogOption.

Я нашел: https://material.angular.io/components/dialog/overview и этот код:

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

Я применил этот код с другим, но он не работает. настройки вообще не применяются.

Кто-нибудь работает с этими настройками?

Answer 1

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 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 я увидел свою проблему, угловой пример открывает диалог следующим образом:

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

Это работает ... Иди сюда и добавь их, чтобы проверить это.

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

....

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