角度4:一一加载组件 [英] angular 4: load components one by one

问题描述

我正在使用基于angular 4框架的Ionic 3.而且我需要知道是否有多个子组件可以逐个异步加载它们:

I'm using Ionic 3 with based on angular 4 framework. And I need to know if I have multiple children components can I load them asynchronously, one by one:

1. 加载父级；
2. 加载第一个孩子；
3. 加载第一个孩子时，加载第二个孩子；
4. 加载第二个孩子时，加载第三个孩子
5. 依此类推

例如，我有一个带有子项的父组件app.module.ts:

For example I have a parent component app.module.ts with children:

@NgModule({
declarations: [
    AppComponentPage
],
imports: [
    IonicPageModule.forChild(AppComponentPage),
    ChildOneComponentModule,
    ChildTwoComponentModule,
    ChildThreeComponentModule,
    ChildFourComponentModule,
],
entryComponents: [
    AppComponentPage
]})
export class AppComponentPageModule {}

和app.component.ts:

import { Component } from '@angular/core';
//import all child components

@Component({
  selector: 'app-parent-component',
  template: `
      <child1-component></child1-component>
      <child2-component></child2-component>
      <child3-component></child3-component>
      <child4-component></child4-component>
  `
 })
 export class AppComponentPage {

    //HOW TO LOAD?

 }

推荐答案

在每个子组件中，添加输出:

In each of your child components, add an output:

@Output
initialized = new EventEmitter<boolean>();

并在您确定组件已初始化(或如您的问题所述已加载)时发出一个事件，因此可以显示下一个事件:

and emit an event when you decide that the component is initialized (or loaded, as your question says), and that the next one can thus be displayed:

ngOnInit() {
  ...
  this.initialized.emit(true);
}

在父组件中，有一个计数器:

In the parent component, have a counter:

counter = 0;

每次初始化组件时都增加计数器，直到计数器允许显示组件时才显示组件:

Increment the counter every time a component is initialized, and don't display a component until the counter is allowing it to be displayed:

<child1-component (initialized)="counter++"></child1-component>
<child2-component (initialized)="counter++" *ngIf="counter > 0"></child2-component>
<child3-component (initialized)="counter++" *ngIf="counter > 1"></child3-component>
<child4-component (initialized)="counter++" *ngIf="counter > 2"></child4-component>

这篇关于角度4:一一加载组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！