Przechodząc HTML do mojego składnika

Question

Rozważmy następujący komponent 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> 

W app.component.html używam paska wykorzystując swoje tagi (<sidebar>). Teraz jednak chcę, aby elementy <li> zostały podane wewnątrz znaczników <sidebar>, aby nie były już wewnątrz sidebar.component.html, aby składnik mógł być ponownie użyty.

Nie jestem pewien, jak się to nazywa i nie mogę go znaleźć.

Z góry dziękuję.

Answer 1

Utwórz komponent paska bocznego z <ng-content> gdzie przeszły dzieci powinny być wyświetlane

@Component({ 
    selector: 'sidebar', 
    template: '<ul><ng-content></ng-content></ul>' 
}) 
export class SidebarComponent { 
} 

i używać go jak

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