将 HTML 传递到我的组件中

Question

考虑以下组件 sidebar.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 中，我使用侧边栏的标签 (<sidebar>)。但是，现在我想使 <li> 元素在 <sidebar> 标签内给出，这样它们就不再在 sidebar.component.html 内，以使组件可重用。

我不确定这叫什么，我找不到它。

提前致谢。

Answer 1

创建一个带有 <ng-content> 的边栏组件，其中应显示传递的子项

@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 传递到我的组件中

Passing HTML into my component

html

angular-components

angular