Question

我有一个组件app-show-on-event，可以显示某些事件发生的时间。事件发生时，父组件中的showThisComponent设置为true。看看

parent.component.html

<app-show-on-event *ngIf="showThisComponent"></app-show-on-event>

在事件组件上显示有大量的子组件和子组件。其中许多包含video个元素。我想在显示至少加载视频海报之前显示loading indicator代替app-show-on-event组件。

您推荐什么解决方案？

注意：我没有使用路由器。

Answer 1

声明一个像

这样的变量

loader:boolean = false;

showThisComponent变为true后

将加载器值更改为true，如

this.loader = true;

html看起来像

<img src="path" *ngIf="loader == false">

或只是

<img src="path ro loader gif image"*ngIf="!showThisComponent">

加载程序图像显示直到showcomponent变为true

Answer 2

你可以试试这样的事情

＆＃13;

export class ChildrenComponent implements OnInit {

  loaded = false;
  @Output('loadedContent') loadedEvent = new EventEmitter<boolean>();
  
  ngOnInit() {
    this.loaded = ApiForContents().then(() => {
      this.emitLoaded(true);
    });
    // if you want to catch error
  }
  
  emitLoaded(bool: boolean) {
    this.loadedEvent.emit(bool);
  }

}

export class ParentComponent {

  spinner = true;
  
  stopSpinner() {
    this.spinner = false;
  }
  
  isLoading() {
    return this.spinner;
  }

}

＆＃13;

<!-- parent HTML -->

<spinner *ngIf="isLoading()"></spinner>
<children (loadedContent)="stopSpinner()">...</children>

＆＃13;

显示加载指示符，直到加载组件（及其子组件）

2 个答案: