时间戳

首页 > 解决方案 > 具有通用组件的角度列表作为列表项

angular - 具有通用组件的角度列表作为列表项

问题描述

假设我有一个“ParentComponent”，它有一个项目列表（假设作为输入）并且需要呈现列表中的元素。我需要这个父组件是可重用的，但是它支持的自定义之一是选择它用于呈现列表项的模板（或组件）。用于子列表项的组件可以是任何东西，只要它可以将提供给它的列表项呈现为输入（模板可以正确引用项的属性）。这在诸如 React 之类的框架中是可能的，所以我的问题是在 Angular 中是否也可能，以及如何做到这一点？

我想象父组件将自定义组件作为输入，以及项目

@Input()
items: Array<ItemType>;

@Input()
componentForRenderingStuff: ?;

模板是这样的

<div class="wrapper">
  <!-- ...stuff -->
  <div class="list-item" *ngFor="let i of items">
    <component-for-rendering-stuff [item]="i"></component-for-rendering-stuff>
  </div>
</div>

这意味着在另一个模板中使用父组件就像

<app-parent-component [items]="items" [componentForRenderingStuff]="SomeComponent"></app-parent-component>

这样的事情可能吗？我看了看，ng-content但我无法使它与*ngFor.

标签： angularangular-templateangular-ngfor

解决方案

正如爱德华在他的评论中建议的那样，可以使用动态组件加载来实现行为。

我在 npm 上找到了一些第三方库，它们解决了这个问题，由于时间和简单性，我使用了具有最吸引人的用户统计数据的库：https ://www.npmjs.com/package/ng-dynamic-component

简而言之，通用列表组件看起来像这样

@Component({
  selector: 'app-list',
  template: `
    <div *ngFor="let item of items">
      <ndc-dynamic
        [ndcDynamicComponent]="listItemComponent"
        [ndcDynamicInputs]="{ input: item.data }"
      ></ndc-dynamic>
    </div>
  `,
  styleUrls: ['...'],
})
export class ClickableVerticalListComponent {
  @Input()
  listItemComponent: any;

  @Input()
  items: Array<any>;

  constructor() {}
}

如果我们想为列表项使用带有特定自定义组件的列表，我们可以这样做：

@Component({
  selector: '...',
  template: `
    <app-list 
      [items]="items" 
      [listItemComponent]="ExampleComponent"
    ></app-list>
  `,
  styleUrls: ['...'],
})
export class ParentComponent {
  ExampleComponent = ExampleComponent;

  items: [{ data: ... }, { data: ... }];

  constructor() {}
}

推荐阅读