Angular2 Html внутри компонента

Question

Я хочу создать компонент как шаблон. Например, вместо того, чтобы писать это везде:

<div class="myClass"> 
    <div class="myHeader" id="headerId"> Title </div> 
    <div class="myContent" id="contentId"> <<Some HTML code>> </div> 
</div> 

Я хочу использовать компонент, как:

<my-component title="Title" headerID=headerId contentID=contentID> 
    <<Some HTML code>> 
</my-component> 

Как я могу реализовать что-то вроде них в Angular2?

Answer 1

Что-то вроде этого:

мои-component.ts

import { Component, Input } from '@angular/core'; 

@Component({ 
selector: 'my-component', 
template: ` 
<div>{{title}}</div> 
<div>{{body}}</div> 
` 
}) 

export class ChildComponent { 

@Input() title: string; 
@Input() body: string; 

} 

Затем вы можете использовать его как это:

<my-component 
    [title]="someTitle" 
    [body]="someBody"> 
</my-component> 

Примечание: если вы добавляете body и title с [], он будет искать компонент, в котором вы используете <my-component> для переменные с именем someTitle и someBody, но если вы добавите его без [], он будет читать someTitle и someBody как строки.

Answer 2

Используйте <ng-content></ng-content> в вашем компоненте.

my.component.html

<div class="myClass"> 
    <div class="myHeader" id="headerId"> Title </div> 
    <div class="myContent" id="contentId"> <ng-content></ng-content> </div> 
</div> 

parent.component.html

<my-component title="Title" headerID=headerId contentID=contentID> 
    <<Some HTML code>> 
</my-component> 

Все, что внутри <my-component></mycomponent> будет оказана в <ng-content></ng-content>