angular 4具有各种列表项模板的通用列表

我试图建立一个通用组件，它显示一个具有角度4和材质设计的项目列表。 目标是创建一个列表，我只向其中提供子组件，如下所示：

<generic-list 
  title="My name list title"
  [items]="names" 
  (change)="handleNameChanged($event)">
    <some-child let-item="name"></some-child>
</generic-list>

@ViewChild(GenericListItem)
childItem: GenericListItem;

<md-list>
  <h2 md-subheader>{{title}}</h2>
  <md-list-item #outlet
    *ngFor="let item of items; let i = index"
    (click)="change.emit(item)">
    // in here should go the content for each item
  </md-list-item>
</md-list>

通用列表

组件如下所示：

<generic-list 
  title="My name list title"
  [items]="names" 
  (change)="handleNameChanged($event)">
    <some-child let-item="name"></some-child>
</generic-list>

@ViewChild(GenericListItem)
childItem: GenericListItem;

<md-list>
  <h2 md-subheader>{{title}}</h2>
  <md-list-item #outlet
    *ngFor="let item of items; let i = index"
    (click)="change.emit(item)">
    // in here should go the content for each item
  </md-list-item>
</md-list>

这会导致有关ChangeDetection的错误

错误：ExpressionChangedTerrithasBeenCheckedError:表达式在检查后已更改。以前的值：“未定义”。当前值：“Hi1V”。该视图似乎是在父视图及其子视图已被脏检之后创建的。它是在变更检测钩子中创建的吗

我的测试组件：

<app-generic-list
  title="AppTitle"
  [items]="names"
  [type]="simpleListItem"
  (change)="handleItemChanged($event)"></app-generic-list>

export class AppComponent {
  simpleListItem = SimpleListItemComponent;
  names = [
    {value: 'Hi1V', desc: 'Hello1'},
    {value: 'Hi2V', desc: 'Hello2'},
    {value: 'Hi3V', desc: 'Hello3'}
  ];

  handleItemChanged(item: string) {
    console.log(item);
  }
}

导出类AppComponent{
simpleListItem=SimpleListItemComponent；
姓名=[
{value:'Hi1V'，desc:'Hello1'}，
{value:'Hi2V'，desc:'Hello2'}，
{value:'Hi3V'，desc:'Hello3'}
];
handleItemChanged（项目：字符串）{
控制台日志（项目）；
}
}

看起来我可能已经接近解决方案了，但现在我不知道在哪一点我需要实例化组件。 此外，子组件中的自定义输出是否有效，是否可以从

通用列表

外部调用

不是更好的解决方案。您可以创建一个列表并提供一个模板来呈现项目。在模板中，您可以使用自己的自定义组件

所有这些都是以一种非常普通的方式进行的

使用的一个例子是：

<evb-list [items]="items" [filterEnabled]="true">

<ng-template let-item>
  <md-checkbox [(ngModel)]="item?.enabled">{{item?.name}} &&
  {{value?.email}}</md-checkbox>
</ng-template>

{{item？.name}&&
{{value？.email}

其中ng模板中的项目将是列表中的每个项目

我认为这个组件以一种通用的方式实现了您想要的一切

希望这对你有帮助

---

；-）

谢谢你的回复。我会接受你的正确答案，因为我相信evb列表确实是一个很好的解决方案。然而，我已经不在该公司工作了，在那里我有那个用例，所以我无法测试它

<evb-list [items]="items" [filterEnabled]="true">

<ng-template let-item>
  <md-checkbox [(ngModel)]="item?.enabled">{{item?.name}} &&
  {{value?.email}}</md-checkbox>
</ng-template>