考虑以下组件:
<div class="sidebar">
<ul>
<li class="tooltipped" data-position="right" data-delay="50" data-tooltip="Go to the dashboard">
<a href="#">
<i class="material-icons">home</i>
<span>Home</span>
</a>
</li>
<li class="tooltipped" data-position="right" data-delay="50" data-tooltip="Manage your times">
<a href="#">
<i class="material-icons">watch_later</i>
<span>Times</span>
</a>
</li>
<li class="tooltipped" data-position="right" data-delay="50" data-tooltip="Go to settings">
<a href="#">
<i class="material-icons">settings</i>
</a>
</li>
</ul>
</div>
在
sidebar.component.html
中,我使用侧边栏的标签(app.component.html
)。但是,现在我想把它设置为在<sidebar>
标记内提供<li>
元素,这样它们就不再位于<sidebar>
内,以使组件可重用。我不知道这叫什么,我找不到它。
事先谢谢。
最佳答案
创建一个边栏组件,其中应显示传递的子项
@Component({
selector: 'sidebar',
template: '<ul><ng-content></ng-content></ul>'
})
export class SidebarComponent {
}
像这样使用
<sidebar>
<li class="tooltipped" data-position="right" data-delay="50" data-tooltip="Go to the dashboard">
<a href="#">
<i class="material-icons">home</i>
<span>Home</span>
</a>
</li>
<li class="tooltipped" data-position="right" data-delay="50" data-tooltip="Manage your times">
<a href="#">
<i class="material-icons">watch_later</i>
<span>Times</span>
</a>
</li>
<li class="tooltipped" data-position="right" data-delay="50" data-tooltip="Go to settings">
<a href="#">
<i class="material-icons">settings</i>
</a>
</li>
</sidebar>
关于html - 将HTML传递到我的组件中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42273548/