如何在动态加载的列表组件中动态加载组件

Question

我有一个组件，我已使用视图子项和组件工厂动态加载，代码如下

@Input() dynamicComponent: Observable<any>;
@ViewChild('expandablerow', { read: ViewContainerRef }) rowContainers;
    loadComponent( component) {
        if (component) {
          if (this.rowContainers > 0) { this.rowContainers.clear(); }
          const factory: ComponentFactory<any> = this.resolver.resolveComponentFactory(component);
          const inlineComponent = this.rowContainers.createComponent(factory);
        }
      }

但我在这里尝试实现的是替换下面的列表之一 当用户单击黄色编辑按钮时，使用详细信息组件。 我有一个函数来根据点击的行获取数据，但我被困在那里

Answer 1

你真的需要动态加载吗？如果我是你，我会添加单个<app-details></app-details>组件并显示它而不是列表项。您可以使用css order属性将详细信息放在列表中的正确位置，并使用过滤器管道从列表中排除列表项本身。

或者，更简单，只需将列表项包含两个组件：

<div *ngFor="let item of list">
    <div ngIf="item != clicked"></div>
    <div ngIf="item == clicked"></div>
</div>

这不应该影响性能，因为当ngIf == true时，组件实际上不存在。