我是 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>
</ul my-list>
关于 Angular 2 : replace host element with component's template,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35733699/