Angular中如何从其他组件设置CSS？跨组件样式修改问题

问题描述 #

尝试通过子组件使用::ng-deep修改父组件中.wrapper元素的背景色，但未达到预期效果：希望<app-mauto>对应的.wrapper显示红色背景，<app-vgud>对应的.wrapper显示绿色背景。相关代码如下：

mauto.component.css #

::ng-deep.wrapper {
  background: red !important;
}

vgud.component.css #

::ng-deep.wrapper {
  background: green !important;
}

app.component.html #

<div class="wrapper">
  <app-mauto></app-mauto> 
</div>

<div class="wrapper"> 
  <app-vgud></app-vgud>
</div>

app.component.css #

.wrapper{
  width:600px;
  height:240px;
  background: black;
}

原因分析 #

::ng-deep会打破Angular的组件样式隔离，将样式提升为全局生效。两个子组件都针对.wrapper设置背景色，后加载的组件样式会覆盖先加载的，导致所有.wrapper都应用最后生效的样式（绿色），无法区分各自对应的父容器。

解决方案 #

方案1：给父容器添加唯一标识，精准定位 #

通过给每个.wrapper添加独有的类名，让子组件的::ng-deep样式只作用于目标容器：

修改app.component.html：

<div class="wrapper mauto-container">
  <app-mauto></app-mauto> 
</div>

<div class="wrapper vgud-container"> 
  <app-vgud></app-vgud>
</div>

更新mauto.component.css：

::ng-deep .mauto-container {
  background: red !important;
}

更新vgud.component.css：

::ng-deep .vgud-container {
  background: green !important;
}

方案2：由父组件控制样式（推荐，降低耦合） #

父组件通过类名直接控制背景色，无需子组件使用::ng-deep：

修改app.component.html：

<div class="wrapper mauto-bg">
  <app-mauto></app-mauto> 
</div>

<div class="wrapper vgud-bg"> 
  <app-vgud></app-vgud>
</div>

更新app.component.css：

.wrapper{
  width:600px;
  height:240px;
  background: black;
}
.mauto-bg {
  background: red !important;
}
.vgud-bg {
  background: green !important;
}

方案3：通过DOM操作修改父元素（不推荐，耦合性高） #

在子组件中利用ElementRef和Renderer2获取并修改父容器样式：

mauto.component.ts：

import { Component, ElementRef, Renderer2, OnInit } from '@angular/core';

@Component({
  selector: 'app-mauto',
  templateUrl: './mauto.component.html',
  styleUrls: ['./mauto.component.css']
})
export class MautoComponent implements OnInit {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngOnInit(): void {
    const parentWrapper = this.el.nativeElement.closest('.wrapper');
    if (parentWrapper) {
      this.renderer.setStyle(parentWrapper, 'backgroundColor', 'red');
    }
  }
}

vgud.component.ts同理修改背景色为绿色即可。

内容的提问来源于stack exchange，提问作者EMahan K