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

Posted 2023-02-23

【中文标题】父组件的类在子组件中不起作用

【英文标题】：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 应用程序时，这可能是值得的......

【参考方案1】：

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

encapsulation: ViewEncapsulation.None

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

【讨论】：

或者把样式放到styles.sccs中