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

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>组件并显示它而不是列表项。您可以使用 cssorder属性将详细信息放在列表中的正确位置，并使用过滤器管道将列表项本身从列表中排除。

或者，更简单，只需让列表项由两个组件组成：

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

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