将HTML传递到我的组件中

考虑以下组件

侧栏.component.html

：

<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>

在

app.component.html

中，我使用侧边栏的标记（

）。但是，现在我想使

元素在

标记中给出，这样它们就不再位于

侧栏.component.html

中，从而使组件可重用

我不知道这叫什么，我很难找到它

---

提前感谢。

创建一个带有

的边栏组件，其中应显示传递的子项

@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>

我不明白问题出在哪里。也许

用于转换？为了清晰起见，我更新了这篇文章，我将尝试一下。谢谢。是的，这是预期的效果！但是，CSS的行为是什么？我的样式不再适用于元素，但是我看不到HTML中会导致选择器更改的任何更改。更改是Angular添加

\ng_context-xxx

属性，并在将样式添加到DOM之前重写样式。您需要添加

：host/deep/li{}

或类似内容才能使样式跨越组件边界。好的，谢谢，我得到了足够的信息，可以开始了！