父组件中的类在子组件中不起作用

Question

我有一个包含HTML组件，如下所示：

<div class="wrapper">
  <lqs-myComponent class="my-component" [ngClass]="myComponentStatus ? 'is-active' : ''"></lqs-myComponent>
</div>

此组件的CSS（或部分CSS）为：

.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 {

      > 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;
          }
        }
      }
    }
  }
}

其基本思想是，当is-active通过页面上的某个click事件应用时，LQS-MyComponent中的div会发生一些动画。因此该组件中的divs类似于：

<div>Hello</div>
<div>Hello hello</div>
<div>Hello hello hello</div>

使用CSS：

div {
  transition: all 0.05s ease-in-out;
  transform: translateY(20px);
  opacity: 0;
}

我的问题是，上面的页面（带有包装器)是发生（click）事件的地方，因此它也是应用is-active类的地方。但是，实际的lqs-mycomponent组件，它只是包含一堆div（应该是动画的），嗯，它们根本没有动画。

我可以看到is-active类是在单击按钮时应用的，但我猜当类应用在另一个组件中时有些东西不正常工作，而应该在另一个组件中工作。

我对Angular还是个新手，所以我不知道现在该如何解决这个问题？

Answer 1

在Angular中，组件CSS样式被封装到组件的视图中，并且不影响应用程序的其余部分，为了控制这种封装在每个组件的基础上发生的方式，您可以在组件元数据中设置视图封装模式。

encapsulation: ViewEncapsulation.None

或者在您的类上使用不推荐使用的::ng-deep