Angular，在渲染另一个组件之前等待一个组件完全渲染

Question

我有一个角度组件，它又包含两个组件，我想确保只有在第一个组件完全渲染后才加载/渲染第二个组件，我该如何实现？

组合.component.html

<first-component></first-component>
<second-component></second-component>

组合.component.ts

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

@Component({
    selector: 'main-component',
    templateUrl: './combined.component.html',
    styleUrls: ['./combined.component.css']
})
export class CombimedComponent {

}

Answer 1

一个简单的方法是...

在您的第一个子组件中添加一个EventEmitter在完全加载后触发事件的事件

第一个component.component.ts

import { Component, Output, EventEmitter, AfterViewChecked } from 'angular/core';

// ...

@Output() finishedLoading: EventEmitter<boolean> = new EventEmitter<boolean>();

ngAfterViewChecked() {
   // you could also do this after a service call of some sort
   this.finishedLoading.emit(true);
}

ngAfterViewChecked 是在组件上运行的最后一个生命周期钩子，所以此时组件已完全加载！

您可以在此处了解有关生命周期挂钩的更多信息

然后在您的父容器中，您可以设置一个名为 hasLoaded

组合.component.ts

// ...

hasLoaded: boolean = false;

然后在你的父组件 html 中你可以监听finishedLoading事件，然后像这样渲染你的第二个组件..

组合.component.ts

<!-- Listens for the finishedLoading event and then sets hasLoaded once its been fired -->
<first-component (finishedLoading)="hasLoaded = $event"></first-component>

<!-- Doesnt render the second component until hasLoaded has been set to true -->
<second-component *ngIf="hasLoaded"></second-component>