<एनजी-कंटेनर> बनाम <टेम्पलेट>

Question

ng-container कोणीय 2 प्रलेखन में उल्लेख किया गया है, लेकिन यह कैसे काम करता है और उपयोग के मामले क्या हैं, इसकी कोई व्याख्या नहीं है।

यह विशेष रूप से ngPluralऔर ngSwitchनिर्देशों में उल्लिखित है ।

के <ng-container>रूप में एक ही काम करता है <template>, या यह निर्भर करता है कि क्या उनमें से एक का उपयोग करने के लिए एक निर्देश लिखा गया था?

कर रहे हैं

<ng-container *ngPluralCase="'=0'">there is nothing</ng-container>

तथा

<template [ngPluralCase]="'=0'">there is nothing</template>

वही माना जाता है?

हम उनमें से एक का चयन कैसे करते हैं?

<ng-container>कस्टम निर्देशन में कैसे इस्तेमाल किया जा सकता है?

Answer 1

संपादित करें: अब यह प्रलेखित है

<ng-container> बचाव के लिए

कोणीय  <ng-container> एक समूहीकरण तत्व है जो शैलियों या लेआउट में हस्तक्षेप नहीं करता है क्योंकि कोणीय इसे DOM में नहीं डालता है।

(...)

<ng-container> एक वाक्य रचना तत्व कोणीय पार्सर द्वारा पहचानी है। यह एक निर्देश, घटक, वर्ग या इंटरफ़ेस नहीं है। यह जावास्क्रिप्ट में घुंघराले ब्रेसिज़ की तरह अधिक है अगर-ब्लॉक:

  if (someCondition) {
      statement1; 
      statement2;
      statement3;
     }

उन ब्रेसिज़ के बिना, जावास्क्रिप्ट केवल पहले कथन को निष्पादित करेगा जब आप सशर्त रूप से उन सभी को एक ही ब्लॉक के रूप में निष्पादित करना चाहते हैं। <ng-container> संतुष्ट कोणीय टेम्पलेट्स में एक समान की जरूरत है।

मूल उत्तर:

इस पुल अनुरोध के अनुसार :

<ng-container> एक तार्किक कंटेनर है जिसका उपयोग समूह नोड्स के लिए किया जा सकता है, लेकिन DOM ट्री में नोड के रूप में प्रदान नहीं किया जाता है।

<ng-container> एक HTML टिप्पणी के रूप में प्रदान की जाती है।

तो यह कोणीय टेम्पलेट:

<div>
    <ng-container>foo</ng-container>
<div>

इस तरह के उत्पादन का उत्पादन करेगा:

<div>
    <!--template bindings={}-->foo
<div>

इसलिए ng-containerउपयोगी है जब आप *ngIf="foo"अपने आवेदन में तत्वों के एक समूह (यानी का उपयोग करके ) को सशर्त जोड़ना चाहते हैं, लेकिन उन्हें किसी अन्य तत्व के साथ लपेटना नहीं चाहते हैं ।

<div>
    <ng-container *ngIf="true">
        <h2>Title</h2>
        <div>Content</div>
    </ng-container>
</div>

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

<div>
    <h2>Title</h2>
    <div>Content</div>
</div>

Comments

ये एक अच्छा बिंदु है। मुझे लगता है कि यह <template>निर्देश के बिना उपयोग किए जाने से अलग है । <template>बस <!--template bindings={}-->इस मामले में उत्पादन होगा ।

— एस्टुस फ्लास्क

वास्तव में, <template></template>उत्पादन करेगा <script></script> यह देखने

— n00dl3

मेरे मामले में ऐसा नहीं था। यदि <script>संकलन के दौरान भी है , तो इसे बाद में हटा दिया जाता है, डोम में कोई अतिरिक्त टैग नहीं हैं। मेरा मानना ​​है कि मैनुअल में पदावनत जानकारी है या उस पर सिर्फ गलत है। किसी भी तरह, <एनजी-कंटेनर> और <टेम्पलेट> के बीच मुख्य अंतर को इंगित करने के लिए धन्यवाद।

— एस्टुस फ्लास्क

रिलीज से पहले, कोणीय का प्रतिपादन किया <script></script>। यह कुछ <!--template bindings={}-->समय के लिए जैसे कुछ प्रदान कर रहा है । जल्द ही डॉक्स ठीक कर दिए जाएंगे।

— वार्ड

Answer 2

प्रलेखन ( https://angular.io/guide/template-syntax# !#star-template ) निम्नलिखित उदाहरण देता है। मान लें कि हमारे पास इस तरह का टेम्पलेट कोड है:

<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>

इससे पहले कि यह प्रदान किया जाएगा, यह "डी-सुगरेड" होगा। अर्थात्, तारांकन संकेतन को संकेतन में स्थानांतरित किया जाएगा:

<template [ngIf]="currentHero">
  <hero-detail [hero]="currentHero"></hero-detail>
</template>

यदि 'करंटहेरो' सत्य है तो इसे इस रूप में प्रस्तुत किया जाएगा

<hero-detail> [...] </hero-detail>

लेकिन अगर आप इस तरह का सशर्त आउटपुट चाहते हैं:

<h1>Title</h1><br>
<p>text</p>

.. और आप नहीं चाहते कि आउटपुट कंटेनर में लिपटा हो।

आप डी-शक्कर संस्करण को सीधे लिख सकते हैं जैसे:

<template [ngIf]="showContent">
  <h1>Title</h1>
  <p>text</p><br>
</template>

और यह ठीक काम करेगा। हालाँकि, अब हमें एस्टरिक्स * के बजाय कोष्ठक [] के लिए ngIf की आवश्यकता है, और यह भ्रामक है ( https://github.com/angular/angular.io/issues/2303 )

इस कारण से एक अलग संकेतन बनाया गया, जैसे:

<ng-container *ngIf="showContent"><br>
  <h1>Title</h1><br>
  <p>text</p><br>
</ng-container>

दोनों संस्करण एक ही परिणाम उत्पन्न करेंगे (केवल h1 और p टैग प्रदान किया जाएगा)। दूसरा पसंद किया जाता है क्योंकि आप हमेशा की तरह * एनजीआई का उपयोग कर सकते हैं।

Comments

अच्छी व्याख्या, यह निर्देश प्रदान करता है कि कैसे ng-containerविचार आया , धन्यवाद :)

— पंकज पारकर

Answer 3

Imo मामलों के लिए उपयोग करें ng-container सरल प्रतिस्थापन हैं जिनके लिए एक कस्टम टेम्पलेट / घटक ओवरकिल होगा। एपीआई डॉक्टर में वे निम्नलिखित का उल्लेख करते हैं

कई रूट नोड्स को समूहीकृत करने के लिए एनजी-कंटेनर का उपयोग करें

और मुझे लगता है कि यह सब क्या है: सामान समूहन।

ध्यान रखें कि ng-containerनिर्देश एक टेम्पलेट के बजाय दूर गिर जाता है जहां इसका निर्देश वास्तविक सामग्री को लपेटता है।

Comments

क्या आपके पास इस उल्लेख का लिंक है? केवल उपरोक्त लिंक किए गए दस्तावेज़ीकरण और बहुवचन मामले के दस्तावेज़ीकरण में इसका उपयोग करते हुए केवल इसे देखते हुए: angular.io/docs/ts/latest/api/common/index/… ।

— कोसलुन

angular.io/docs/ts/latest/api/common/index/…

— मैट

धन्यवाद, दस्तावेज़ की कमी के बारे में डॉक्स साइट पर एक मुद्दा बनाया और इस जवाब को संदर्भित किया: github.com/angular/angular.io/issues/2553

— कोसलुन

नीचे की ओर -1। एनजी-कंटेनर एक कस्टम टेम्पलेट से बचने के बारे में नहीं है, यह एक कंटेनर में लिपटे नहीं होने वाली सशर्त सामग्री के लिए सक्षम होने के बारे में है। वास्तव में एक कस्टम टेम्प्लेट एक आवरण कंटेनर भी प्रस्तुत करेगा, अर्थात् निर्देश टैग।

— कार्लो रोज़ेन

तुम पूरी तरह ठीक हो। यह निश्चित रूप से एक अंतर है जिसका उल्लेख किया जाना चाहिए। मैंने अपनी पोस्ट में संकेत जोड़ा है।

— मैट

Answer 4

जब आप एक तालिका का उपयोग करना चाहते हैं, तो इसके लिए एक केस केस * ngIf और * ngFor - के रूप में td / th में एक div डालकर टेबल तत्व को गलत बना देगा -। मुझे इस समस्या का सामना करना पड़ा और वह उत्तर था।

Comments

लेकिन वही चीज हासिल की जा सकती है <template [ngIf]...>। सवाल इन दोनों दृष्टिकोणों के बीच का अंतर था।

— एस्टस फ्लास्क

ओह, मेरा बुरा है, इसका जवाब यहाँ लगता है कि stackoverflow.com/questions/40529537/… वे बस इतना ही कहते हैं कि यह सिर्फ एक सिंटैक्स अंतर है

— shakram02