web-dev-qa-db-fra.com

Passer du HTML dans mon composant

Considérez le composant suivant 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>

Dans app.component.html, J'utilise la barre latérale à l'aide de ses balises (<sidebar>). Cependant, maintenant je veux que le <li> les éléments sont donnés à l'intérieur du <sidebar> tags afin qu'ils ne soient plus à l'intérieur sidebar.component.html pour rendre le composant réutilisable.

Je ne sais pas comment cela s'appelle et j'ai du mal à le trouver.

Merci d'avance.

htmlangularangular-components
14
Limnic

Créez un composant de barre latérale avec un <ng-content> où les enfants passés doivent être affichés

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

et l'utiliser comme

<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>
25
Günter Zöchbauer