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

Question

使用角度功能动态添加组件。

Documentation

Demo

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

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

我对角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(); 
}