css - Angular2 子组件 [ngclass] 样式延迟应用

Question

请就这个问题提出建议：

假设我有一个父组件，它显示一个子组件，它是一个带有叠加层的加载图标：

 <loading [FullOverlay]="true"></loading>

我传入了一个覆盖类类型的值，根据FullOverlay的值，子组件将使用[nglcass]的两种类样式之一。

问题是，在瞬间，子组件上根本没有应用任何样式，我该如何解决这个延迟？

子组件html：

<div [ngClass]="FullOverlay ? 'full-overlay' : 'small-overlay'">
  <img src="assets/images/loading.gif" class="loading-icon-size" alt="loading">
</div>  

子组件ts文件：

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

@Component({
  selector: 'loading',
  templateUrl: './loading.component.html',
  styleUrls: ['./loading.component.scss']
})

export class LoadingComponent implements OnInit {
  @Input() FullOverlay: boolean;

  constructor() { }

  ngOnInit() {
  }

}

谢谢你。

标签： cssangularcomponents