コンポーネントの作成順序を角2で

Question

コンポーネントのリストを読み込み、自分のページに動的に作成しようとしています。私はこれにComponentResolverを使用し、新しい@ViewChildメソッドを使用してコンポーネントを作成しています。

私は、ComponentCreatorクラスを拡張するMainComponentファイルを持っています。このComponentCreatorクラスは、他のすべてのコンポーネントが「拡張」してそれぞれの子コンポーネントを作成するために使用できる基本クラスです。

MainComponent.ts

export class MainComponent extends ComponentCreator { 

@ViewChild("target", { read: ViewContainerRef }) target; 

constructor(_componentResolver: ComponentResolver, metaService: MetaService) { 
    super(_componentResolver, metaService, "./src/app/meta.json", "MainComponent"); 
} 

ComponentCreator.ts

export class ComponentCreator{ 

    //declare variables 

    constructor(_componentResolver: ComponentResolver, _metaService: MetaService, _templateUrl: string, _templateName: string) { 
    this._componentResolver = _componentResolver; 
    this._templateUrl = _templateUrl; 
    this._metaService = _metaService; 
    this._templateName = _templateName; 
    } 

    ngAfterViewInit() { 
    //metaService gets the template. It's a json file in which all the child components of Main component are listed 
    this._metaService.getTemplate(this._templateUrl) 
     .subscribe(
     _template => this._template = this.loadComponents(_template), 
     error => this._errorMessage = <any>error); 
    } 

    loadChildComponents(template) { 
    //Create components here 
    //'place' comes from the json file. It's Equal to target. 
    for(let component in jsonData) 
     this._componentResolver.resolveComponent(component).then((factory:ComponentFactory<any>)=> { this.cmpRef = this.place.createComponent(factory)}); 
    } 
} 

私が直面してる問題はである：ここでは

は、コードスニペット物事を明確にするためには、コンポーネントの作成順序たとえば、私は4つの子コンポーネントを持ち、そのうちの2つはプレーンなHTMLテーブルであり、2つはd3を使って描かれたグラフです。私は1,2,3,4として作成順序を指定していますが、レンダリングの順序が乱れてしまいます。それらがすべて 'target' div内にロードされるので、HTML表は高速にレンダリングされ、両方のグラフの前に来ます。

これを修正する方法はありますか？また、注文が同じになるように、表とグラフに別々のdivを使用する必要がありますか？

Answer 1

私は、for()ループ内で非同期コードを呼び出し、ランダムな結果が出ることが問題だと思います。

使用Promise.all()他

Promise.all(
    jsonData.map(component => 
    this._componentResolver.resolveComponent(component) 
    .then((factory:ComponentFactory<any>)=> { 
     this.cmpRef = this.place.createComponent(factory); 
    }); 
) 
); 

がhttps://github.com/angular/angular/issues/7854#issuecomment-203988888