कोणीय 2: घटक टैग

Question

जब एक घटक प्रदान की गई है, तो अंदर सामग्री नजरअंदाज कर दिया है के बीच सामग्री प्रस्तुत है, उदाहरण के

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'app-root', 
    template: '<div>{{title}}</div>', 
}) 
export class AppComponent { 
    title = 'app works!'; 
} 

के लिए

<app-root>Ignored content</app-root> 

की तरह इसका इस्तेमाल करते हुए प्रस्तुत

<div>app works!</div> 

लेकिन प्राइमएनजी संवाद देखकर वे इस

जैसे घटकों का उपयोग करते हैं

<p-dialog [(visible)]="display"> 
    <p-header> 
     Header content here 
    </p-header> 
    Content 
    <p-footer> 
     Footer content here 
    </p-footer> 
</p-dialog> 

"यहां शीर्ष लेख सामग्री", "सामग्री" और "यहां पाद लेख सामग्री" घटक के अंदर हैं, क्यों अनदेखा नहीं किया जा रहा है और मैं इसे कैसे प्राप्त कर सकता हूं?

Answer 1

घटक के टेम्पलेट जहां सामग्री का अनुमान किया जाना चाहिए करने के लिए <ng-content></ng-content> जोड़ें:

@Component({ 
    selector: 'app-root', 
    template: '<div>{{title}}</div> 
      <br> 
      <ng-content></ng-content>', 
}) 
export class AppComponent { 
    title = 'app works!'; 
} 

सामग्री पेश की जा सके:

<app-root>This is projected content!</app-root> 

उत्पादन होगा:

app works! 
This is projected content! 

यहाँ है कोणीय सामग्री प्रोजेक्शन (कोणीय 1 ट्रांसक्यूलेशन) के बारे में एक महान लेख: Transclusion in Angular 2 with ng-content