Angular 在两个组件中使用相同的选择器，但模板语法不同？

我有2个组件（DetailPage、ListPage）和以下模板：

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

{{text}}
{{content}}
{{text}}
{{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>

{{text}}
{{content}}
{{text}}
{{content}}

谢谢@jayanthCoder，我明白了你的意思，并更新了解决这个问题的方法

my header.component.ts

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

@组件({
选择器：“我的标题”，
模板：``，
封装：视图封装。无
})

我的详细信息页.component.ts

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

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

详细信息页面的内容：{{text}

我的listpage.component.ts

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

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

列表页的内容：{{text}

---

有了这个解决方案，我可以在不同的情况下保持多组件的结构。

有没有办法在不同的情况下创建两个组件“我的头”和提供者？我的头是同一个组件。只需为每个细节页面或列表页面指定一个属性即可。在my header的代码中，检查该属性，并为每个listpage或detail页指定句柄