Angular 中的动态子组件

我正在构建一个具有一致的元素列表设计模式的应用程序。如果我有一个 A 类型的对象，我会创建AComponent它接受a作为输入，然后创建另一个组件来迭代 A 列表，AListComponent。那么如果我有一个对象 B，我需要做同样的事情。看来我应该能够做一个ObjectListComponent传入我想要迭代的对象的类，以保持代码干燥。

例如，给定

A组件控制器

...

@Input
a: A;
...

A组件 HTML

<div>{{ a.name }}</div>

AList组件控制器

...

@Input()
aList: A[];
...

AListComponent HTML

<div *ngFor='let aObj of aList'>
    <app-a [a]='aObj'></app-a>
</div>

我们怎样才能抽象出AListComponent to an ObjectListComponent?

对象列表组件控制器

...

@Input()
type: any;

@Input()
objects: <type>[]

objectComponent: any;

ngOnInit () {
  this.objectComponent = <get object component from type>
}

对象列表组件 HTML

<div *ngFor='let obj of objects'>
    <app-objectComponent [object]='obj'></app-objectComponent>
</div>

哪里的ObjectListComponent将用作

...

<app-object-list [type]='A' objects='aList'></app-object-list>
...

感谢您提供演示代码，看看这个演示代码 https://stackblitz.com/edit/github-cmb2ba?file=src%2Fapp%2Fobject-list%2Fobject-list.component.ts

主要逻辑在对象列表.components.ts

ngAfterViewInit(){
     const component_obj = this.getComponentType(this.objects[0]);
      this.containers.map(
      (vcr: ViewContainerRef, index: number) => {
        const factory = this.resolver.resolveComponentFactory(
          component_obj);
        const componentRef = vcr.createComponent(factory);
        componentRef.instance['data'] = this.objects[index];
        this.cd.detectChanges()
      }
    )
 }

基本上，我所做的是：

1. a.component.html：处理对象的逻辑interface A

2. b.组件.html：处理类型对象的逻辑interface B

3. 您可以在 2 种对象类型之间切换home.component.html

显示组件 A

<app-object-list [objects]='aList'></app-object-list>

显示组件 B

<app-object-list [objects]='bList'></app-object-list>

您可以改进检查和确定类型的逻辑。这部分代码可以改进