1

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

我有一个扩展 ComponentCreator 类的 MainComponent 文件。这个 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");
}

组件创建者.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 ；渲染顺序搞砸了。由于它们都加载到“目标”div 中，因此 HTML 表格会快速呈现并位于两个图表之前。

有什么方法可以解决它，还是我必须对表格和图表使用单独的 div 以使顺序保持不变？

4

1 回答 1

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-203988888DynamicComponentLoader上的旧版类似示例

于 2016-06-01T06:46:46.103 回答