добавить и удалить стиль CSS, когда ngOnInit и ngOnDestroythe компонент

Question

Я создал компонент для файла предварительного просмотра audio, video,.,,и я использую диалог материалов для этого.

Мне нужно, чтобы при открытии диалогового окна фон был прозрачным.

Я использую этот код в scss компоненте:

::ng-deep .mat-dialog-container {
    background-color: transparent !important;
  }

он работает во всех диалогах, но мне нужно использовать только для диалога в этом компоненте.

inСледующим шагом я пытаюсь использовать этот код, чтобы использовать этот стиль только для этого компонента:

@Injectable({
    providedIn: 'root'
})

export class StyleService {
    private stylesMap: Map<any, Node> = new Map();
    private host: Node;

    constructor() {
        this.host = document.head;
    }

    private createStyleNode(content: string): Node {
        const styleEl = document.createElement('style');
        styleEl.textContent = content;
        return styleEl;
    }

    addStyle(key: any, style: string): void {
        const styleEl = this.createStyleNode(style);
        this.stylesMap.set(key, styleEl);
        this.host.appendChild(styleEl);
    }

    removeStyle(key: any): void {
        console.log('in')
        const styleEl = this.stylesMap.get(key);
        console.log(styleEl);
        if (styleEl) {
            this.stylesMap.delete(key);
            this.host.removeChild(styleEl);
        }
    }
}

и использовать его в компоненте следующим образом:

  constructor(
    , private styleService: StyleService) {}

ngOnInit(): void {
    this.styleService.addStyle('transparent-dialog-theme', require('../../them/dialogStyle.scss'));
}



   ngOnDestroy(): void {
    this.styleService.removeStyle('transparent-dialog-theme');
  }

, но он не работает дляменя (нет прозрачного диалога для этого компонента).

в чем проблема?как я могу решить эту проблему ???

Answer 1

Если вы хотите применить определенный стиль к фону диалога в любом конкретном случае, вы можете добавить класс к фону с конфигурацией.

например -

let dialogRef = this.dialog.open(ExampleDialogComponent, {
      width: '250px',
      data: { name: this.name, animal: this.animal },
      backdropClass: 'dialog-bg-trans'
    });

ив своем глобальном стиле вы можете добавить этот стиль -

.dialog-bg-trans {
  background-color: transparent;
}

Вы можете предоставить этот конфиг только в том месте, где вы хотите поведение, а не в других местах.

Пожалуйста, укажите это - https://stackblitz.com/edit/ab-angular-mat-dialog-bg-color?file=app%2Fexample%2Fexample.component.ts

Надеюсь, это будет полезно.