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