来自子组件的 class 未正确应用

Question

我正在使用 Angular 8 和 AdminLTE3 作为我的模板做一个网络应用程序。

我想为卡片实现Loading Style，这段代码需要放在.card结束标签之前。

<div class="overlay">
  <i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>

工作示例：

<!-- Main content -->
<section class="content">

  <!-- Card -->
  <div class="card">

    <div class="card-body">
      ...
    </div>
    <!-- /.card-body -->

    <!-- Loading Style -->
    <div class="overlay">
      <i class="fas fa-2x fa-sync-alt fa-spin"></i>
    </div>

  </div>
  <!-- /.card -->

</section>
<!-- /.content -->

无效示例：

当我将加载样式代码移动到可重用组件并且现在该组件是子组件时，加载样式未正确应用。

<!-- Main content -->
<section class="content">

  <!-- Card -->
  <div class="card">

    <div class="card-body">
      ...
    </div>
    <!-- /.card-body -->

    <!-- Loading Style -->
    <app-card-loading-state [isLoading]="true"></app-card-loading-state>

  </div>
  <!-- /.card -->

</section>
<!-- /.content -->

CardLoadingStateComponent

@Component({
  selector: 'app-card-loading-state',
  template: '
             <div class="overlay" *ngIf="isLoading">
               <i class="fas fa-2x fa-sync-alt fa-spin"></i>
             </div>
           ',
})
export class CardLoadingStateComponent {
  @Input() isLoading = false;
}

我已经尝试申请 encapsulation: ViewEncapsulation.None 和 host: {class: 'card'}，但是没有成功。

--

overlay class 位于 here，模板 CSS 的内部。我将该文件注入我的 angular.json.

"styles": [
      "node_modules/admin-lte/dist/css/adminlte.min.css",
      "src/styles.scss"
          ],

--

我的目标是在 CardLoadingStateComponent 是子组件时正确应用 CSS。

Answer 1

我不是 100% 确定，但我怀疑 .overlay class 被用作选择器的方式 .card > .overlay 需要 .overlay 是直接的child仁.card

当您在 child 组件中使用 .overlay 时，它不再是直接的 children，因为它们之间有组件选择器标记。这就是 .card > .overlay 不再起作用的原因。

为 child 组件使用属性选择器，以摆脱 DOM 中的组件选择器标记，可能会解决问题。

@Component({
  selector: '[app-card-loading-state]',
  template: '<i class="fas fa-2x fa-sync-alt fa-spin"></i>',
})
export class CardLoadingStateComponent {
  @HostBinding('class.overlay') overlay = true
}

<!-- Main content -->
<section class="content">

  <!-- Card -->
  <div class="card">

    <div class="card-body">
      ...
    </div>
    <!-- /.card-body -->

    <!-- Loading Style -->
    <div app-card-loading-state *ngIf="isLoading"></div>

  </div>
  <!-- /.card -->

</section>
<!-- /.content -->

这是概念实施的证明：https://stackblitz.com/edit/angular-ivy-x5xpzr

正如我在开头所说，我不确定这是否是您面临的问题，但它可能是。所以让我知道它是否有效，我希望它能有所帮助。

来自子组件的 class 未正确应用

A class from a child component is not applied correctly

adminlte

angular