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，我明白了这一点并为此遇到了麻烦。

my-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个组件中使用相同的选择器但模板语法不同？

2 个答案: