एकाधिक एनजी सामग्री

Question 1

मैं ng-contentAngular 6 में कई का उपयोग करके एक कस्टम घटक बनाने की कोशिश कर रहा हूं , लेकिन यह काम नहीं कर रहा है और मुझे पता नहीं क्यों।

यह मेरा घटक कोड है:

<div class="header-css-class">
    <ng-content select="#header"></ng-content>
</div>
<div class="body-css-class">
    <ng-content select="#body"></ng-content>
</div>

मैं एक और जगह में इस घटक का उपयोग करें और दो अलग अलग एचटीएमएल कोड के अंदर प्रस्तुत करने के लिए कोशिश कर रहा हूँ bodyऔर हेडर selectकी ng-content, कुछ इस तरह:

<div #header>This should be rendered in header selection of ng-content</div>
<div #body>This should be rendered in body selection of ng-content</div>

लेकिन घटक रिक्त प्रदान कर रहा है।

क्या तुम लोग जानते हो कि मैं क्या गलत कर सकता हूं या एक ही घटक में दो अलग-अलग वर्गों को प्रस्तुत करने का सबसे अच्छा तरीका क्या है?

धन्यवाद!

Question 2

आप डमी विशेषताओं को जोड़ सकते हैं headerऔर bodyटेम्पलेट संदर्भों के विपरीत (#header, #body)।
और जैसे विशेषता के ng-contentसाथ उपयोग करना transclude ।selectselect="[header]"

app.comp.html

<app-child>
    <div header >This should be rendered in header selection of ng-content</div>
    <div body >This should be rendered in body selection of ng-content</div>
</app-child>

child.comp.html

<div class="header-css-class">
    <ng-content select="[header]"></ng-content>
</div>
<div class="body-css-class">
    <ng-content select="[body]"></ng-content>
</div>

डेमो

Question 3

वेब घटक चश्मा फिट करने के लिए । भले ही वह कोणीय ही क्यों न हो। यह चयनकर्ता के लिए विशेषताओं को टालने के बारे में है जैसे कि कोणीय निर्देश या किसी अन्य उपयोग के साथ आरक्षित विशेषताएँ। तो, हम सिर्फ "स्लॉट" विशेषता का उपयोग करते हैं। हम देखेंगे <ng-content select="[slot=foobar]">के रूप में <slot name="foobar">।

उदाहरण:

हैलो-world.component.html

<ng-content select="[slot=start]"></ng-content>
<span>Hello World</span>
<ng-content select="[slot=end]"></ng-content>

app.component.html

<app-hello-world>
  <span slot="start">This is a </span>
  <span slot="end"> example.</span>
</app-hello-world>

परिणाम

This is a Hello World example.

स्टैकब्लिट्ज़ उदाहरण

आप "केला" या "मछली" जैसे किसी भी नाम का उपयोग कर सकते हैं। लेकिन "शुरू" और "अंत" तत्वों को पहले और बाद में रखने के लिए एक अच्छा सम्मेलन है।

Question 4

वैकल्पिक रूप से आप उपयोग कर सकते हैं:

app.comp.html

<app-child>
    <div role="header">This should be rendered in header selection of ng-content</div>
    <div role="body">This should be rendered in body selection of ng-content</div>
</app-child>

child.comp.html

<div class="header-css-class">
    <ng-content select="div[role=header]"></ng-content>
</div>
<div class="body-css-class">
    <ng-content select="div[role=body]"></ng-content>
</div>

Question 5

अन्य उत्तरों को लागू करना:

तुम भी कस्टम टैग के साथ यह कर सकते हैं (जैसे <ion-card>, <ion-card-header>, और <ion-card-content>)।

app.comp.html

<app-child>
    <app-child-header>This should be rendered in header selection of ng-content</app-child-header>
    <app-child-content>This should be rendered in content selection of ng-content</app-child-content>
</app-child>

child.comp.html

<div class="header-css-class">
    <ng-content select="app-child-header"></ng-content>
</div>
<div class="content-css-class">
    <ng-content select="app-child-content"></ng-content>
</div>

आपको एक चेतावनी संदेश मिलेगा, लेकिन यह काम करेगा। आप चेतावनी संदेशों को दबा सकते हैं या ज्ञात टैग का उपयोग कर सकते हैं जैसे कि headerया footer। हालांकि, अगर आपको इनमें से कोई भी तरीका पसंद नहीं है, तो आपको अन्य समाधानों में से एक के साथ जाना चाहिए।