创建一个接受并迭代自定义元素的组件

Question

我的目标是创建一个可以接受自定义元素并使用提供的数据对其进行迭代的组件。

这是我能够想到的，并且效果很好。 但是我不满意。 我想要一些不需要将自定义元素包装在<template>标记中的东西。

import {Component, Input, Output, EventEmitter} from 'angular2/core';

@Component({
  selector: 'sub',
  template: `
    <ng-content></ng-content>
  `
})
export class SubComponent  {}

@Component({
  selector: 'my-app',
  template: `
    <sub>
      <template ngFor #listItem [ngForOf]="list" #i="index"> //<--don't want this tag
        <div>{{listItem | json}}</div>
        <p>{{i}}</p>
      </template>
    </sub>
  `,
  directives: [ SubComponent ]
})

export class AppComponent {
  list = [{name: 'John', age: 26},{name: 'Kevin', age: 26},          {name:'Simmons', age:26}];
}

• 上面的代码是对该插件的编辑。
• 在这里看到了建议，但很模糊。

Answer 1

在这里发现，我可以对ng-content包含使用指令（ng2的早期版本不使用），因此解决方案很简单，如下所示：

import {Component, Input, Output, EventEmitter} from 'angular2/core';

@Component({
    selector: 'sub',
    template: `
        <p>content</p>

        <ng-content></ng-content>

        <p>more content</p>

    `
})
export class SubComponent  {}

@Component({
    selector: 'my-app',
    template: `
        <sub >
            <any-element *ngFor="let listItem of list" >
                {{ listItem | json }}
            </any-element>
        </sub>
    `
})

export class AppComponent {
    list = [{name: 'John', age: 26},{name: 'Kevin', age: 26}, {name:'Simmons',     age:26}];
}