我是新来的一般角度，特别是角度2。我试图写一个容器组件，它应该有子组件。
例如，容器组件：
@Component({
selector: 'my-list',template: `
<ul>
<ng-content></ng-content>
</ul>
`
})
export class MyList {
}
子组件：
import { Component } from 'angular2/core'
@Component({
selector: 'my-item',template: `
<li>
<ng-content></ng-content>
</li>
`
})
export class MyItem {
}
我想做这个结构：
<my-list>
<my-item>One</my-item>
<my-item>Two</my-item>
</my-list>
要呈现如下：
<my-list>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</my-list>
但是，我拥有容器的主机元素，并保留项目：
<my-list>
<ul>
<my-item>
<li>One</li>
</my-item>
<my-item>
<li>Two</li>
</my-item>
</ul>
</my-list>
问题：有没有办法消除主机元素，只留下渲染的模板？
最后我找到解决方案：将ElementRef注入MyItem并使用其nativeElement.innerHTML：
我的列表：
import { Component,ContentChildren,QueryList } from 'angular2/core'
import { MyItem } from './myitem'
@Component({
selector: 'my-list',template: `
<ul>
<li *ngFor="#item of items" [innerHTML]="item.innerHTML"></li>
</ul>
`
})
export class MyList {
@ContentChildren(MyItem) items: QueryList<MyItem>
}
MyItem：
import { Directive,Inject,ElementRef } from 'angular2/core'
@Directive({selector: 'my-item'})
export class MyItem {
constructor(@Inject(ElementRef) element: ElementRef) {
this.innerHTML = element.nativeElement.innerHTML
}
}
