Question

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

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

我试过了：

在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是否支持这样的事情？

谢谢！

Answer 1

陈述性方法

您可以使用ngComponentOutlet。

代码：

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

模板：

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

ngComponentOutlet - 实例化单个Component类型并插入   其主机视图进入当前视图。 NgComponentOutlet 提供了一个   动态组件创建的声明方法。

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

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

更新

不要记得将动态渲染组件添加到 AppModule 的entryComponents：

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

StackBlitz Demo

设置数据的必要方法

应用-component.template：

<ng-container #comps> </ng-container>

通过#comps装饰器访问ViewChild（ng-container）视图并创建组件。因此，您无法初始化b = new BComponent()之类的组件。

首先需要解决组件工厂。

通过viewContainerRef's createComponent方法初始化组件。它将reference返回到实例化组件

通过引用，可以访问实例属性并根据需要更新任何数据

应用-component.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 Demo

Answer 2

每个组件必须有单独的选择器。

import {Component} from "@angular/core";

@Component({
  selector: "app-shape" //maybe even is not needed here
})
class Shape {

}

@Component({
  selector: "app-rect"
})
class Rect extends Shape {

}

所以你可以这样做。

<div *ngFor="let shape of shapes">
  <app-rect *ngIf="//check if shape is rect"></app-rect>
  <app-circle *ngIf="//check if shape is circle"></app-circle>
</div>

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

2 个答案:

陈述性方法

设置数据的必要方法