Utiliser le même sélecteur dans 2 composants mais une syntaxe de template différente?

Question

J'ai 2 composants (Detailpage, ListPage) avec ci-dessous modèle:

<my-detailpage> 
<my-header>{{ text }} </my-header> 
<my-content>{{ content }} </my-content> 
</my-detaipage> 

<my-listpage> 
<my-header>{{ text }} </my-header> 
<my-content>{{ content }} </my-content> 
</my-listpage> 

Je veux utiliser le même sélecteur pour tête et contenu, mais la base différente de modèle à la page de détail ou d'une page de liste.

J'ai essayé de faire cela en utilisant fournisseurs mais je ne sais pas si c'est le bon chemin.

Toute aide aussi bien à moi, merci beaucoup.

Answer 1

Merci @jayanthCoder, j'ai compris ce que vous vouliez dire et je me suis mis à jour pour résoudre ce problème.

my-header.component.ts

@Component({ 
    selector: 'my-header', 
    template: `<ng-content></ng-content>` , 
    encapsulation: ViewEncapsulation.None 
}) 

my-detailpage.component.ts

<my-detailpage> 
    <my-header>Content for detail page : {{ text }} </my-header> 
</my-detaipage> 

my-listpage.component.ts

<my-listpage> 
    <my-header>Content for list page : {{ text }} </my-header> 
</my-listpage> 

Avec cette solution, je peux garder la structure de multi composant avec un cas différent.

Answer 2

Utilisez un attribut pour différencier my-header et my-content.

<my-detailpage> 
<my-header pagetype="detailpage">{{ text }} </my-header> 
<my-content pagetype="detailpage">{{ content }} </my-content> 
</my-detaipage> 

<my-listpage> 
<my-header pagetype="listpage">{{ text }} </my-header> 
<my-content pagetype="listpage">{{ content }} </my-content> 
</my-listpage>