Angular 4 - 如何显示继承类组件的模板

我正在尝试根据项目（组件）的类型显示项目列表：

我有一系列组件。 全部继承自基类。 数组类型被定义为基类的类型。 我想显示数组（比如说作为项目列表），每个数组都有自己的模板，而不是基本模板。

我已经尝试过：

在app.component.html中：

<app-shape *ngFor="let shape of shapes"></app-shape>

在 app.component.ts 中：

shapes: ShapeComponent[] = [new CircleComponent(), new SquareComponent()];

我定义了 3 个组件：

export class ShapeComponent {
}

export class CircleComponent extends ShapeComponent{
}

export class SquareComponent extends ShapeComponent{
}

结果是我得到了一个形状列表。

Angular 支持这样的事情吗？

Thanks!

声明式方法

您可以使用ngComponentOutlet https://angular.io/api/common/NgComponentOutlet.

Code:

shapes: ShapeComponent[] = [CircleComponent, SquareComponent];

模板：

<ng-container *ngFor="let shape of shapes">
    <ng-container *ngComponentOutlet="shape">
    </ng-container>
</ng-container>

ngComponentOutlet- 实例化单个组件类型并插入 将其宿主视图转换为当前视图。NgComponentOutlet提供了一个 动态组件创建的声明性方法。

NgComponentOutlet如果设置了错误值，则需要组件类型 视图将清除，任何现有组件将被销毁。

因此，模板中不需要硬代码。*ngFor将迭代代码中的组件类型数组

Update

不记得添加动态渲染组件entryComponents of 应用程序模块:

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent, AComponent, BComponent ],
  entryComponents: [
    AComponent, BComponent 
  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

StackBlitz 演示 https://stackblitz.com/edit/angular-compoent-outlet

设置数据的命令式方法

应用程序组件.模板：

<ng-container #comps>

</ng-container>

访问#comps(ng-container) 查看者ViewChild装饰器并创建组件。 所以你不能像这样初始化组件b = new BComponent().

1. 首先需要解决组件工厂。
2. 通过初始化组件视图容器引用 https://angular.io/api/core/ViewContainerRef#description 创建组件 https://angular.io/api/core/ViewContainerRef#createComponent方法。它返回参考 https://angular.io/api/core/ComponentRef到实例化组件
3. 通过引用，访问实例属性并根据需要更新任何数据

应用程序组件.ts：

 @ViewChild('comps', { read: ViewContainerRef }) comps: ViewContainerRef;
  constructor(private componentFactoryResolver: ComponentFactoryResolver) {

  }

ngOnInit() {
    this.comps.clear();
    let aComponentFactory = this.componentFactoryResolver.resolveComponentFactory(this.compArr[0]);
    let aComponentRef = this.comps.createComponent(aComponentFactory);
    (<AComponent>aComponentRef.instance).name = 'A name';

    let bComponentFactory = this.componentFactoryResolver.resolveComponentFactory(this.compArr[1]);

    let bComponentRef = this.comps.createComponent(bComponentFactory);
    (<BComponent>bComponentRef.instance).name = 'B name';
  }

StackBlitzh 演示 https://stackblitz.com/edit/angular-dynamic-components-load