Question

我使用基于角度4框架的Ionic 3。我需要知道我是否有多个子组件，我可以逐个异步加载它们：

加载父级;
加载第一个孩子;
第一个孩子装的时候，装第二个孩子;
当第二个孩子装载时，装第三个孩子
等

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

@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?

 }

Answer 1

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

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

并在您确定组件已初始化（或加载，如问题所示）时发出一个事件，并且可以显示下一个组件：

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

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

counter = 0;

每次初始化组件时递增计数器，并且在计数器允许显示组件之前不显示组件：

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

Answer 2

也许你的意思是：

<child1-component *ngFor="let child of children"></child1-component>

class MyComponent {
  children:any[] = [];

  load() {
    Observable.interval(1000).take(5).subscribe(e => this.children.push(e));
  }
}

如果您想添加不同的组件，可以使用Angular 2 dynamic tabs with user-click chosen components

等方法

角度4：逐个加载组件

2 个答案: