我是angular的新手，特别是angular2。我正在尝试编写一个容器组件，其中应包含子组件。
例如，容器组件：
@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>
问题：有没有办法消除宿主元素并只留下渲染模板？
你应该得到你想要的东西：
@Component({
selector: 'ul[my-list]',
template: `
<ng-content></ng-content>
`
})
export class MyList {
}
@Component({
selector: 'li[my-item]',
template: `
<ng-content></ng-content>
`
})
export class MyItem {
}
<ul my-list>
<li my-item>One</li my-item>
<li my-item>Two</li my-item>
</li my-list>
最后我找到了解决方案：将ElementRef注入MyItem并使用其nativeElement.innerHTML：
MYLIST：
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
}
}
新的角度版本具有非常酷的指令，也可以用于您的用例。 Tadaa：NgComponentOutlet。快乐的编码;）
例：
@Component({selector: 'hello-world', template: 'Hello World!'})
class HelloWorld {
}
@Component({
selector: 'ng-component-outlet-simple-example',
template: `<ng-container *ngComponentOutlet="HelloWorld"></ng-container>`
})
class NgTemplateOutletSimpleExample {
// This field is necessary to expose HelloWorld to the template.
HelloWorld = HelloWorld;
}
有一个hacky变通方案解决方案可能不支持旧浏览器版本，但它适用于我的项目，我认为它很容易集成而无需更改或添加大量代码。
首先，您需要从元素选择器更改MyItem类/组件的选择器
selector: 'custom-element-name'
属性选择器
selector: '[customAttributeName]'
最后使用html slot元素将MyItem包装在MyList html模板中
<slot customAttributeName></slot>
完整代码：
import { Component } from 'angular2/core'
@Component({
selector: 'my-list',
template: `
<ul>
<slot myItemAsAtribute></slot>
</ul>
`
})
export class MyList {
}
@Component({
selector: '[myItemAsAtribute]',
template: `
<li *ngFor="let item of items">{{item}}</li>
`
})
export class MyItem {
}
在最新的角度你甚至可以避免添加<ng-content></ng-content>
我申请的是：
import {Component} from '@angular/core';
@Component({
selector: 'div[app-root]',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent {
title = 'Delegates Presence Reporting';
}
和模板：
<div class="centered">
<h1>{{title}}</h1>
</div>
的index.html
<body>
<div app-root></div>
</body>