Angular项目中如何用SCSS在子元素含指定class时设置兄弟元素样式

该需求完全可以实现，根据项目的浏览器兼容性要求，可选择以下两种方案：

方案1：纯SCSS实现（推荐，适配现代浏览器） #

使用CSS原生:has()伪类即可实现，该特性目前已覆盖Chrome 105+、Firefox 121+、Safari 15.4+等主流现代浏览器：

.green {
  background-color: green;
}

// 当parent下存在带.green类的child2时，自动给child1设置绿色背景
.parent:has(.child2.green) {
  .child1 {
    @extend .green;
  }
}

方案2：Angular逻辑实现（全浏览器版本兼容） #

如果项目需要兼容不支持:has()的旧版浏览器，可以通过Angular原生的视图查询和类绑定能力实现：

1. 调整模板，给child2添加模板引用变量，给child1添加动态类绑定：

<div class="parent">
    <div class="child1" [class.green]="child1NeedGreen">
        div1
    </div>
    <div #child2Ref class="child2">
        div2
    </div>
</div>

2. 在组件类中同步child2的类状态到child1：

import { Component, ViewChild, ElementRef, AfterViewChecked } from '@angular/core';

@Component({
  // 你的原有组件配置
})
export class YourComponent implements AfterViewChecked {
  @ViewChild('child2Ref') child2Ref!: ElementRef<HTMLElement>;
  child1NeedGreen = false;

  ngAfterViewChecked(): void {
    // 每次视图更新后检测第三方插件是否给child2添加了green类
    this.child1NeedGreen = this.child2Ref.nativeElement.classList.contains('green');
  }
}

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