时间戳

首页 > 解决方案 > 父组件的类在子组件中不起作用

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

问题描述

我有一个内部有 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;
          }
        }
      }
    }
  }
}

lqs-myComponent基本思想是当is-active页面上的某些点击事件应用时，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 还很陌生，所以我现在不知道如何解决这个问题？

标签： cssangularnestedcomponents

解决方案

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

encapsulation: ViewEncapsulation.None

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

推荐阅读