एक घटक के अंदर कोणीय 2 एचटीएमएल

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

कुछ इस तरह रेंडर किया जाएगा:

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

नोट:: <my-component> के लिए यदि आप [] साथ body और title जोड़ने के लिए, यह घटक खोज करेंगे जिसमें आप उपयोग कर रहे हैं मेरी-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; 

} 

तो फिर तुम इसे इस तरह उपयोग कर सकते हैं 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>