角度4：逐个加载组件

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

加载父项;
加载第一个孩子;
当第一个孩子加载时，加载第二个孩子;
当第二子加载，加载第三子
等

例如我有孩子一个父组件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? 

}

来源

2017-09-15 Merge-pony

利用setTimeout和ngIf –

你是什么意思“异步加载组件”？你的意思是“一个接一个地显示它们，每N秒”？还有别的吗？ –

你想要加载什么？什么是“一个接一个”。 “一个接一个”加载时你期望获得什么知识？ –

在每个子组件的方法，增加一个输出：

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

来源

2017-09-15 07:56:43

也许你的意思是：

<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

来源

2017-09-15 07:37:58

角度4：逐个加载组件

回答

相关问题