ng2 - एनजी-कंटेनर और एनजी-टेम्पलेट टैग के बीच अंतर

Question 1

क्या कोई कृपया उपयोग <ng-container>और <ng-template>तत्वों के बीच के अंतर को स्पष्ट कर सकता है ?

मुझे इसके लिए दस्तावेज़ीकरण नहीं मिला NgContainer और खाका टैग के बीच अंतर को समझ नहीं पाया।

प्रत्येक का एक कोड उदाहरण बहुत मदद करेगा।

Question 2

वे दोनों इस समय (2.x, 4.x) समूह तत्वों को एक साथ उपयोग किए बिना एक और तत्व को प्रस्तुत करने के लिए उपयोग किए जाते हैं, जो पृष्ठ पर प्रस्तुत किया जाएगा (जैसे divयाspan )।

template, हालांकि, बुरा वाक्यविन्यास की आवश्यकता है। उदाहरण के लिए,

<li *ngFor="let item of items; let i = index; trackBy: trackByFn">...</li>

बन जाएगा

<template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
  <li>...</li>
</template>

आप ng-containerइसके बजाय इसका उपयोग कर सकते हैं क्योंकि यह अच्छे *वाक्यविन्यास का पालन करता है जो आप उम्मीद करते हैं और शायद पहले से ही परिचित हैं।

<ng-container *ngFor="let item of items; let i = index; trackBy: trackByFn">
  <li>...</li>
</ng-container>

GitHub पर इस चर्चा को पढ़कर आप अधिक जानकारी पा सकते हैं ।

ध्यान दें कि 4.x <template>में पदावनत किया जाता है और इसे बदल दिया जाता है <ng-template>।

उपयोग

<ng-container>आप नेस्टेड संरचनात्मक निर्देशों के लिए एक सहायक तत्व की जरूरत है की तरह *ngIfया *ngForया आप इस तरह के एक संरचनात्मक निर्देश के अंदर एक से अधिक तत्व रैप करने के लिए चाहते हैं, तो;
<ng-template>यदि आप एक दृश्य की जरूरत है "स्निपेट" है कि आप का उपयोग कर विभिन्न स्थानों पर टिकट के लिए चाहते हैं ngForTemplate, ngTemplateOutletया createEmbeddedView()।

Question 3

ng-templateजैसे संरचनात्मक निर्देश के लिए प्रयोग किया जाता है ng-if, ng-forऔर ng-switch। यदि आप इसे संरचनात्मक निर्देश के बिना उपयोग करते हैं, तो कुछ भी नहीं होता है और यह प्रस्तुत करेगा।

ng-containerका उपयोग तब किया जाता है जब आपके पास एक उपयुक्त आवरण या मूल कंटेनर नहीं होता है। ज्यादातर मामलों में, हम एक कंटेनर के रूप में divया उपयोग कर रहे हैं spanलेकिन ऐसे मामलों में जब हम कई संरचनात्मक निर्देशों का उपयोग करना चाहते हैं। लेकिन हम एक तत्व पर एक से अधिक संरचनात्मक निर्देशों का उपयोग नहीं कर सकते हैं, उस स्थिति में, ng-containerएक कंटेनर के रूप में इस्तेमाल किया जा सकता है

Question 4

एनजी-टेम्पलेट प्रतिपादन HTML के लिए एक कोणीय तत्व है। इसे कभी भी सीधे प्रदर्शित नहीं किया जाता है। संरचनात्मक निर्देशों के लिए उपयोग करें जैसे: ngIf, ngFor, ngSwitch, .. उदाहरण :
<ng-template>

<div *ngIf="hero" class="name">{{hero.name}}</div>

कोणीय एक <ng-template>तत्व में * ngIf विशेषता का अनुवाद करता है, जैसे मेजबान तत्व के चारों ओर लिपटा हुआ।

<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>

एनजी-कंटेनर
एक समूह तत्व के रूप में उपयोग करें जब कोई उपयुक्त मेजबान तत्व न हो।
उदाहरण:

<div>
  Pick your favorite hero
  (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero">
  <span *ngFor="let h of heroes">
    <span *ngIf="showSad || h.emotion !== 'sad'">
      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
    </span>
  </span>
</select>

यह काम नहीं करेगा। क्योंकि कुछ HTML तत्वों के लिए सभी तत्काल बच्चों को विशिष्ट प्रकार का होना आवश्यक है। उदाहरण के लिए, <select>तत्व को बच्चों की आवश्यकता होती है। आप सशर्त या ए में विकल्पों को लपेट नहीं सकते <span>।

इसे इस्तेमाल करे :

<div>
  Pick your favorite hero
  (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero">
  <ng-container *ngFor="let h of heroes">
    <ng-container *ngIf="showSad || h.emotion !== 'sad'">
      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
    </ng-container>
  </ng-container>
</select>

यह काम करेगा।

अधिक जानकारी: कोणीय संरचनात्मक निर्देश

Question 5

एनजी-टेम्पलेट सच मूल्य दिखाते हैं।

<ng-template>
    This is template block
</ng-template>

आउटपुट:

बिना हालत के एनजी-कंटेनर शो भी सामग्री दिखाते हैं।

<ng-container>
    This is container.
</ng-container>

आउटपुट:
यह कंटेनर है।

Question 6

ng-templateजैसा कि नाम का तात्पर्य है, एक टेम्पलेट को दर्शाता है । अपने आप से यह कुछ भी प्रस्तुत नहीं करता है। हम ng-containerएक टेम्पलेट को गतिशील रूप से प्रस्तुत करने के लिए प्लेसहोल्डर प्रदान करने के लिए एक का उपयोग कर सकते हैं ।

इसके लिए एक और उपयोग मामला ng-templateयह है कि हम इसका उपयोग कई संरचनात्मक निर्देशों को एक साथ करने के लिए कर सकते हैं। आप इस ब्लॉग पोस्ट में महान उदाहरण पा सकते हैं: कोणीय एनजी-टेम्पलेट / एनजी-कंटेनर

Question 7

सरल शब्दों में, रिएक्ट केng-container एक उच्च घटक की तरह है , जो केवल अपने बाल तत्वों के प्रतिपादन में सहायता करता है।

ng-templateमूल रूप से कोणीय के आंतरिक कार्यान्वयन के लिए है , जिसमें ng-templateप्रतिपादन के दौरान कुछ भी पूरी तरह से नजरअंदाज कर दिया जाता है और यह मूल रूप से दृश्य स्रोत पर एक टिप्पणी बन जाता है। इसका उपयोग कोणीय के आंतरिक निर्देशों जैसे कि ngIf, ngSwitchआदि के साथ किया जाना चाहिए ।

Question 8

मुझे <ng-container>"मार्कअप" से "तर्क" को अलग करने का एक तरीका पसंद है, जितना संभव हो सके कोणीय .component.html फ़ाइलों में।

(आंशिक) उदाहरण एक html तालिका की पंक्तियों को प्रस्तुत करने के लिए:

        <ng-container *ngFor="let product of products">
          <tr>
            <td></td>
            <td>{{ product.productName }}</td>
            <td>{{ product.productCode }}</td>
            <td>{{ product.releaseDate }}</td>
            <td>{{ product.price }}</td>
            <td>{{ product.starRating }}</td>
          </tr>
        </ng-container>

इस तरह, अगर मैं HTML <table>से किसी और चीज़ में बदलाव करना चाहता हूं , जैसे कि <div>फ्लेक्सबॉक्स स्टाइलिंग का एक गुच्छा , तो मुझे लूपिंग लॉजिक (या इसे पूरी तरह से खोने का जोखिम) से "बाहर निकालना" नहीं चाहिए <tr>। यह सामान्य HTML द्वारा आंशिक रूप से अस्पष्ट होने से लूपिंग (ngFor) तर्क भी रखता है।