javascript - 在 OnInit、OnDestroy 上添加和删除 css 样式

Question

我为预览文件 audio 、 video 创建了一个组件，并且为此使用了 Material 对话框。

当我打开对话框时，我需要背景是透明的。

我在 scss 组件中使用此代码:

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

它适用于所有对话框，但我只需要在该组件中使用对话框。

在下一步中，我尝试使用此代码仅对该组件使用此样式:

@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

希望对您有所帮助。