Angular父组件绑定的动态类样式在子组件内部元素上不生效

Angular默认开启ViewEncapsulation.Emulated模拟样式隔离机制，框架会为每个组件的样式生成带专属属性的选择器，确保组件样式不会互相污染：

• 父组件编译后的所有样式规则，仅能匹配父组件模板内部、带父组件专属内容标记的DOM元素
• 子组件模板渲染的DOM，只会携带子组件自己的封装标记，父组件的样式规则默认不会穿透到这部分DOM上
• 你当前代码中is-active类已经正确绑定在lqs-myComponent自定义元素上，但父组件SCSS里写的.my-component > div规则，受封装限制根本无法匹配到自定义元素内部由子组件渲染的三个div，自然不会触发预设动画。

你的选择器书写逻辑本身没有问题，差异来自Angular的样式隔离机制，和DOM结构、类绑定的正确性无关。

按照适配性和推荐优先级排序：

方案1：使用::ng-deep穿透组件样式封装（改动量最小，适配现有代码） #

在父组件的对应选择器前增加::ng-deep伪类，强制跳过样式封装限制，让规则可以匹配到子组件内部的DOM，修改后的SCSS片段如下：

.wrapper {
  .my-component {
    display: grid;
    width: 100%;
    justify-self: center;
    box-sizing: border-box;
    border-radius: 5px;
    row-gap: 5px;
    align-self: start;

    &.is-active {
      // 增加::ng-deep跳过封装限制
      ::ng-deep > div {
        transition: all 0.1s ease-in-out;
        transform: translateY(0px);

        @for $i from 0 through 50 {
          &:nth-child(#{$i + 1}) {
            transition-delay: (0.05s * $i) + 0.50s;
            opacity: 1;
          }
        }
      }
    }
  }
}

注意：使用::ng-deep时尽量收窄选择器的作用范围，避免规则变成全局样式造成其他组件的样式污染。

方案2：通过输入属性传递状态，由子组件自行控制样式（更符合Angular设计规范） #

摒弃父组件跨组件选取内部DOM的逻辑，通过组件输入接口把激活状态传入子组件，由子组件自己控制内部元素的样式：

• 给lqs-myComponent子组件增加isActive输入属性：@Input() isActive = false
• 父组件调用子组件时传入状态：<lqs-myComponent [isActive]="myComponentStatus" class="my-component"></lqs-myComponent>
• 子组件在自身模板内给div绑定状态类，在子组件自己的样式文件中写对应的动画规则，完全不需要跨组件访问内部DOM。

方案3：关闭子组件的视图封装（不推荐常规场景使用） #

如果子组件本身就是全局通用的无样式隔离组件，可以在组件装饰器中修改封装模式，让子组件的DOM对外部样式全局可见：

@Component({
  selector: 'lqs-myComponent',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  encapsulation: ViewEncapsulation.None
})

这种方式会让子组件的样式变成全局作用域，容易引发不可控的样式冲突，仅适合本身就需要全局样式的通用组件使用。

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