Rendre le contenu entre les balises

Lorsqu'un composant est rendu, le contenu à l'intérieur, il est ignoré, par exemple:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: '<div>{{title}}</div>',
})
export class AppComponent {
  title = 'app works!';
}

De l'utiliser comme:

<app-root>Ignored content</app-root>

Rend:

<div>app works!</div>

Mais en regardant PrimeNg dialogue, ils utilisent des composants comme ceci:

<p-dialog [(visible)]="display">
    <p-header>
        Header content here
    </p-header>
    Content
    <p-footer>
        Footer content here
   </p-footer>
</p-dialog>

Comme Header content here, Content et Footer content here sont à l'intérieur du composant, pourquoi ne sont-ils ignorés et comment puis-je y parvenir?

OriginalL'auteur LeagueOfJava | 2017-02-20

  1. 59

    Ajouter <ng-content></ng-content> du composant de modèle où le contenu doit être projetée:

    @Component({
  selector: 'app-root',
  template: '<div>{{title}}</div>
             <br>
             <ng-content></ng-content>',
})
export class AppComponent {
  title = 'app works!';
}

    Contenu à être projeté:

    <app-root>This is projected content!</app-root>

    La sortie sera:

    app works!
This is projected content!

    Voici un excellent article sur Angulaire Contenu de Projection (Angulaire 1 Transclusion): Transclusion dans Angulaire 2 avec ng-contenu

    une idée de comment accéder au contenu à l'intérieur <ng-contenu> à l'intérieur du composant ?
    Vous pouvez utiliser '@ContentChild' et '@ContentChildren' d'accéder au contenu projeté.
    Je suis surpris que cette réponse a beaucoup de upvotes car il montre que le non-travail exemple. En regardant ici vous verrez que ng-content ne peut pas être utilisé à l'intérieur de index.html, où app-root est d'abord initialisé.
    par exemple, je upvoted comme il explique comment afficher le contenu ajouté entre les composants des balises, je ne se soucient pas d'exemple

    OriginalL'auteur Seid Mehmedovic