在2個組件中使用相同的選擇器，但使用不同的模板語法？

Question

我有2個組分（DetailPage，末頁）具有低於模板：

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

我想使用相同的選擇爲頭和內容，但詳細信息頁面或列表頁面上的不同模板庫。

我試圖用供應商來做到這一點，但不知道它是否是正確的路徑。

任何幫助也對我很好，非常感謝。

Answer 1

謝謝@jayanthCoder，我明白了你的意思，並更新了我的這種麻煩。

我-header.component.ts

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

我-detailpage.component.ts

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

我-listpage.component.ts

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

有了這個解決方案，我可以保持不同情況下的多組件結構。

Answer 2

使用屬性my-header和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>