Javascript 角度传感器中的动态子组件

我正在为元素列表构建一个具有一致设计模式的应用程序。如果我有一个类型为A的对象，我会创建一个组件，它接受A作为输入，然后创建另一个组件来迭代A的列表，

AListComponent

。如果我有一个对象B，我需要做同样的事情。似乎我应该能够使

ObjectListComponent

传入我要迭代的对象的类，以保持代码干燥

例如，给定

组件控制器

。。。
@输入
a:a；
...

a组件HTML

{{a.name}

组件控制器

。。。
@输入（）
A[]；
...

AListComponent HTML

如何将

AListComponent

抽象为

ObjectListComponent

ObjectListComponent控制器

。。。
@输入（）
类型：任意；
@输入（）
对象：[]
对象组件：任何；
恩戈尼尼特（）{
this.objectComponent=
}

ObjectListComponent HTML

其中，

ObjectListComponent

将用作

。。。
...

感谢您提供演示代码

主要逻辑在对象列表.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()
      }
    )
 }

基本上，我所做的是：

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

接口a

b.component.html：处理接口b

您可以在home.component.html中的两种对象类型之间切换

显示组件A

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

显示组件B

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

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

---

你需要提供更多的信息。

a组件与
b组件的差异有多大？我的意思是，它们都相似吗（css、函数）？
此.objectComponent
的用途是什么，您计划如何使用它？如果唯一的区别是
类型
，则创建接口
ICanvasComponentInput
，并在其内部将类型定义为
obj:A | B
。在
ObjectListComponent
@Input
param中使用它。（尝试为ObjectListComponent提供更通用的名称）想法是，
ObjectListComponent
应该能够迭代任意模型列表，因为表示模型的组件是通过
type
属性传入的
this.objectComponent
将是通过
objects
属性传入的对象列表中表示对象类型的组件。我想我有点明白了这个问题。如果你能在stackblitz.com上创建一个演示，那将对我非常有帮助。我将从那里开始，它说请求的页面找不到对不起，我以前没有用过StackBlitz，所以还是习惯了。这应该行得通：我注意到列表中的一个元素没有出现时出现了一个小错误。