Angular2 Html wewnątrz komponentu

Question

Chcę utworzyć komponent, taki jak szablon. Na przykład, zamiast pisać to wszędzie:

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

chcę użyć komponentu jak:

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

Jak mogę zaimplementować coś jak te w Angular2?

Answer 1

coś takiego:

moi-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; 

} 

Wtedy można go używać tak:

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

Uwaga: Jeśli dodać body i title z [] będzie szukać komponent, w którym używasz <my-component> dla zmienne o nazwach someTitle i someBody, ale jeśli dodasz je bez [], będą to ciągi oznaczone jako someTitle i someBody.

Answer 2

Użyj <ng-content></ng-content> w swoim komponencie.

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> 

Cokolwiek jest w środku <my-component></mycomponent> będą renderowane w <ng-content></ng-content>