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}];
}

上面的代码是对this plunker。
看到了here的建议，但很模糊。

Answer 1

发现here我可以使用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}];
}

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

1 个答案: