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

【问题标题】：Class from parent component doesn't work in child component父组件的类在子组件中不起作用
【发布时间】：2021-07-03 08:55:19
【问题描述】：

我有一个内部有 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 类的地方。然而，实际的lqs-myComponent 组件，它只包含一堆 div（应该是动画的），好吧，它们根本没有动画。

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

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

【问题讨论】：

您可能想查看angular animations。可能需要一些时间来理解它，但在处理具有多个动画的 Angular 应用程序时，这可能是值得的......

标签： css angular nested components

【解决方案1】：

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

encapsulation: ViewEncapsulation.None

或在您的课程中使用已弃用的::ng-deep

【讨论】：

或者把样式放到styles.sccs中