Использовать один и тот же селектор в 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

Спасибо @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>