Angular 4 - 如何显示继承类组件的模板 [英] Angular 4 - How to display the template of the inheriting class component

问题描述

我正在尝试根据其类型显示项目(组件)列表:

我有一组组件.所有的都继承自一个基类.数组类型定义为基类的类型.我想用自己的模板而不是基本模板来显示数组(比如项目列表).

我已经试过了:

在 app.component.html 中:

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

在 app.component.ts 中:

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

我定义了 3 个组件:

导出类 ShapeComponent {}导出类 CircleComponent 扩展了 ShapeComponent{}导出类 SquareComponent 扩展了 ShapeComponent{}

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

Angular 是否支持这样的事情?

谢谢！

解决方案

声明式方法

您可以使用ngComponentOutlet.

代码:

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

模板:

<ng-container *ngComponentOutlet="shape"></ng-容器></ng-容器>

<块引用>

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

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

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

更新

不记得在AppModule的entryComponents中添加动态渲染组件:

@NgModule({进口:[ BrowserModule，FormsModule ]，声明:[ AppComponent, HelloComponent, AComponent, BComponent ],入口组件:[A组件，B组件],引导程序:[ AppComponent ]})导出类 AppModule { }

StackBlitz 演示

设置数据的命令式方法

app-component.template:

</ng-容器>

通过 ViewChild 装饰器访问 #comps(ng-container) 视图并创建组件.所以你不能像 b = new BComponent() 那样初始化组件.

1. 首先需要解析组件工厂.
2. 通过viewContainerRef's createComponent 方法.它返回引用到实例化组件
3. 通过引用，可以访问实例属性并根据需要更新任何数据

app-component.ts:

 @ViewChild('comps', { read: ViewContainerRef }) comps: ViewContainerRef;构造函数(私有 componentFactoryResolver:ComponentFactoryResolver){}ngOnInit() {this.comps.clear();让 aComponentFactory = this.componentFactoryResolver.resolveComponentFactory(this.compArr[0]);让 aComponentRef = this.comps.createComponent(aComponentFactory);(<AComponent>aComponentRef.instance).name = 'A 名称';让 bComponentFactory = this.componentFactoryResolver.resolveComponentFactory(this.compArr[1]);让 bComponentRef = this.comps.createComponent(bComponentFactory);(bComponentRef.instance).name = 'B 名称';}

StackBlitzh 演示

I'm trying to display a list of items (components) according to their types:

I have an array of components. All inherits from a base class. The array type is defined as that of the base class. I want to display the array (let say as a list of items) each with its own template, rather than the base template.

I have tried that:

In the app.component.html:

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

In the app.component.ts:

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

I have defined 3 Components:

export class ShapeComponent {
}

export class CircleComponent extends ShapeComponent{
}

export class SquareComponent extends ShapeComponent{
}

And the result is that I get a list of shapes.

Does Angular support such a thing?

Thanks!

解决方案

Declarative approach

You can use ngComponentOutlet.

Code:

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

template:

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

ngComponentOutlet - Instantiates a single Component type and inserts its Host View into current View. NgComponentOutlet provides a declarative approach for dynamic component creation.

NgComponentOutlet requires a component type, if a falsy value is set the view will clear and any existing component will get destroyed.

So, no hard code needed in template. *ngFor will iterate over component types array in your code

Update

Don't remember add dynamic rendering component to entryComponents of AppModule:

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

StackBlitz Demo

Imperative approach with setting data

app-component.template:

<ng-container #comps>

</ng-container>

Get access to #comps(ng-container) view by ViewChild decorator and create components. So you can't initilize component like b = new BComponent().

1. First need to resolve component factory.
2. Initialize component via viewContainerRef's createComponent method. It returns reference to instantiated component
3. By the reference, get access to instance property and update any data as you need

app-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

这篇关于Angular 4 - 如何显示继承类组件的模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！