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