Question

我有一个角度组件，其中又包含两个更多的组件，我想确保仅在第一个组件完全渲染后才加载/渲染第二个组件，我该如何实现呢？

combined.component.html

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

combined.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，以便在事件完全加载后触发事件

first-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是在组件上运行的最后一个生命周期挂钩，因此，此时组件已完全加载！

您可以了解有关生命周期挂钩here

的更多信息

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

combined.component.ts

// ...

hasLoaded: boolean = false;

然后在您的父组件html中，您可以监听finishedLoading事件，然后像这样呈现第二个组件。

combined.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>

角度化，等待一个组件完全渲染，然后再渲染另一个

1 个答案: