Question

我正在尝试阅读组件列表并在我的页面上动态创建它们。我正在使用ComponentResolver并使用新的@ViewChild方法创建组件。

我有一个扩展ComponentCreator类的MainComponent文件。此ComponentCreator类是一个基类，所有其他组件都可以“扩展”并用于创建各自的子组件。

以下是使事情更清晰的代码片段：

MainComponent.ts

#include "stdafx.h"

#include <iostream>
#include <vector>
#include <string>


using namespace std;

int main()
{
    std::vector<std::string> pvector;
    pvector.push_back("Steve");
    pvector.push_back("Jhon");
    pvector.push_back("Michael");

    char name[256];

    do
    {
        cout << "Enter name for search: ";
        cin >> name;

        for (int i = 0; i < pvector.size(); i++)
        {
            if (pvector[i] == name)
            {
                cout << pvector[i] << " found" << endl;
                break;
            }
            else if (i == pvector.size() - 1)
            {
                cout << name << " " << "not found!" << endl;
            }
        }
    } while (cin.good());
}

ComponentCreator.ts

export class MainComponent extends ComponentCreator {

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

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

我面临的问题是组件创建的顺序。例如，我有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

旧版DynamicComponentLoader的类似示例

Angular 2中的组件创建顺序

1 个答案: