Javascript 在ngOnInit和ngOnDestroythe组件时添加和删除css样式
我创建了一个用于预览文件音频、视频等的组件。我使用的是材质对话框 我需要打开对话框时,背景是透明的 我在scss组件中使用此代码:Javascript 在ngOnInit和ngOnDestroythe组件时添加和删除css样式,javascript,angular,typescript,Javascript,Angular,Typescript,我创建了一个用于预览文件音频、视频等的组件。我使用的是材质对话框 我需要打开对话框时,背景是透明的 我在scss组件中使用此代码: ::ng-deep .mat-dialog-container { background-color: transparent !important; } 它在所有对话框中都有,但我只需要在这个组件中用于对话框 在下一步中,我将尝试使用以下代码,仅针对此组件使用此样式: @Injectable({ providedIn: 'root' })
::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);
}
}
}
但是它对我不起作用。这个组件没有透明的对话框
有什么问题吗?如何解决此问题?如果您想在任何特定情况下将特定样式应用于对话框的背景,可以使用配置将类添加到背景中 例如—
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;
}
您只能在需要行为的地方提供此配置,而不能在其他地方提供
请参阅以下-
希望这会有帮助 您是否控制了require“../../themes/dialogStyle.scss”的输出?@AdarshMohan它显示了未定义的想法。看见我想您正在尝试获取文件内容。也许可以帮助您。我需要透明::ng deep.mat对话框容器{background color:transparent!important;}如果必须使用::ng deep,您可以尝试将其与类cdk overlay background一起应用,以使background透明-::ng deep.cdk overlay background{背景色:透明;}@kianousjdortaj我尝试了你的方法-添加样式到头部并在销毁时删除。看起来它工作得很好-唯一的区别是我添加了样式内容作为常量而不是必需的,并使用了类cdk覆盖背景。我没有在Angular中使用必需,而是我认为导入很常见。可能你可以尝试使用导入“…”。thenval=>{addStyle}。
.dialog-bg-trans {
background-color: transparent;
}