如何在角度2中显示动态添加的组件列表

Question

采用角度特征动态添加组件。

Documentation

Demo

我需要帮助，所以我们直接在页面上显示广告列表，而不是一个接一个地显示。

我认为这就像在 ng-template 元素上添加 *ngFor 一样简单，但它似乎比这更复杂。

我对 angular 2 比较陌生，因此我们将不胜感激。

Answer 1

把 loadComponent 函数改成这样：

loadComponent() {
    let viewContainerRef = this.adHost.viewContainerRef;

    for (const ad of this.ads) {
        let componentFactory = this.componentFactoryResolver.resolveComponentFactory(ad.component);
        let componentRef = viewContainerRef.createComponent(componentFactory);
        (<AdComponent>componentRef.instance).data = ad.data;
    }
}

viewContainer 一个接一个地插入视图。

编辑：

关于抛出的错误。最好有一段代码。 这是对问题的更彻底的解释： https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

import { ChangeDetectorRef, (...) } from '@angular/core';

constructor(
    private cd: ChangeDetectorRef,
    private componentFactoryResolver: ComponentFactoryResolver
) { }

ngAfterViewInit() {
    this.loadComponent();
    this.getAds();
    this.cd.detectChanges(); 
}