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

Question

利用角度特征动态添加零部件。

文档

演示

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

我认为这就像在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(); 
}