Class 父组件在子组件中不起作用

Question

我有一个内部有 HTML 的组件，看起来像这样：

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

此组件的 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 时，lqs-myComponent 内的 div 会出现一些动画。所以该组件中的 div 就像：

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

我的问题是，上面的页面（带有 wrapper）是 (click) 事件发生的地方，所以它也是 is-active class 的地方被申请;被应用。然而，实际的 lqs-myComponent 组件只包含一堆 div（应该是动画的），嗯，它们根本没有动画。

我可以看到单击按钮时应用了 is-active class，但我猜当在另一个按钮中应用 class 时某些东西无法正常工作组件，但应该在不同的组件中工作。

我对 Angular 还很陌生，所以我现在不确定如何解决这个问题？

Answer 1

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

encapsulation: ViewEncapsulation.None

或在您的类

上使用已弃用的 ::ng-deep

Class 父组件在子组件中不起作用

Class from parent component doesn't work in child component

css

components

nested

angular