Angular 子组件中的类未正确应用

我正在使用Angular 8和作为我的模板来做一个web应用程序

我想为一张卡实现，此代码需要放在.card结束标记之前

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

--

---

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

我不是100%确定，但我怀疑

.overlay

类用作选择器的方式是

.card>.overlay

，这要求

.overlay

是

.card

的直接子级

在子组件中使用

.overlay

时，它不再是直接的子组件，因为组件选择器标记位于两者之间。这就是为什么

.card>.overlay

不再工作的原因

使用子组件的属性选择器，以摆脱DOM中的组件选择器标记，可以解决这个问题

@组件({
选择器：“[应用程序卡加载状态]”，
模板：“”，
})
导出类CardLoadingStateComponent{
@HostBinding（'class.overlay'）overlay=true
}

...

以下是概念验证实施：

---

正如我在开始时所说，我不确定这是否是你面临的问题，但它可能是。因此，请告诉我它是否有效，我希望它能有所帮助。

哪里是

overlay

定义的类？@ysf Hi，is，在模板的CSS中。我将该文件注入我的

angular.json

，它可以工作。你的解释对我来说很有意义，并且在你提供的例子中得到了验证。谢谢。我很高兴这有帮助。祝您有个美好的一天。

<!-- 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 -->

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

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