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

我想为 header 和 content 使用相同的选择器，但是基于详细信息页面或列表页面的不同模板。

我尝试使用 提供商 来做到这一点，但不确定它是否正确。

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

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

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

通过这个解决方案，我可以保持多组件结构的不同大小写。

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

Use same selector in 2 components but different template syntax?

angular-providers

angular