CSS3在Angular 2中加载动画组件

我开始学习如何使用CSS3制作动画，这是我的第一个

我已经将它放在我的

Angular4

应用程序中的

标记之间，它可以工作了

---

但我希望将其打包在一个角度组件中以供重用，这可以实现吗？如何在加载组件之前加载其他组件以。。。是否显示加载动画？

我假设您希望在加载某些异步数据时显示此动画。在这种情况下，您可以将HTML/CSS添加到组件中，并使用输入变量控制其可见性

在本例中，它将默认显示，然后您可以在解析数据后隐藏它

import { Component, Input } from '@angular/core';

@Component({
  selector: 'spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.scss']
})
export class ItemsListComponent {

  @Input() showSpinner: boolean = true;

  constructor() { }


}

在spinner.component.html中

<div *ngIf="showSpinner" class="lds-cube">
  <!-- the rest of your html -->
</div>

---

为了实现可重用性，您可以制作一个角度组件。但是如果你这样做，你将无法命名，把这个组件放在根中，那么我应该把根放在这个组件中吗？那么，我的模块应该在加载程序级别吗？根组件用于引导应用程序。我相信你不能用你的组件包装根。好吧，那么加载组件将如何在根之前加载和显示？我认为如果不需要任何服务器渲染，你可能可以将此加载程序放在根的旁边，当应用程序启动时，你可以将此加载程序从应用程序中隐藏，但是我希望有一个启动屏幕加载动画，在我的根组件之前加载并显示动画。我更新了我的答案，你可以用简单的CSS来实现。你不能用一个组件来做这件事，因为这是本末倒置的。到目前为止，我是用纯css来做的，好吧，很高兴知道这是不可能的，谢谢！

<spinner [showSpinner]="yourBoolean"></spinner>

<app-root></app-root>
<div class="loading">
  <h1>~$ loading app...</h1>
 <!-- your animation html -->
</div>

.loading {
    opacity: 0;
    position: fixed;
    height: 100%;
    width: 100%;
    background: #272c33;
    padding-top: 25vh;
    text-align: center;
    z-index: -1;
    transition: opacity .8s ease-out;
}
app-root:empty + .loading {
  opacity: 1;
  z-index: 99999;
}