angular - 在 2 个组件中使用相同的选择器但模板语法不同？

Question

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

我想对标题和内容使用相同的选择器，但基于详细信息页面或列表页面的不同模板。

我试图通过使用提供者来做到这一点，但不确定它是否是正确的路径。

任何帮助对我也有好处，非常感谢。

Answer 1

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

Answer 2

谢谢@jayanthCoder，我明白了你的意思，并为这个麻烦更新了我的方法。

我的 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.component.ts

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

使用此解决方案，我可以保持具有不同情况的多组件结构。