এনজি 2 - এনজি-ধারক এবং এনজি-টেম্পলেট ট্যাগের মধ্যে পার্থক্য

Question 1

কেউ দয়া করে ব্যবহার <ng-container>এবং <ng-template>উপাদানগুলির মধ্যে পার্থক্য বর্ণনা করতে পারেন ?

আমি NgContainerটেমপ্লেট ট্যাগের মধ্যে পার্থক্য বুঝতে পারছি না এবং ডকুমেন্টেশন খুঁজে পাইনি।

প্রতিটি একটি কোড উদাহরণ ব্যাপকভাবে সাহায্য করবে।

Question 2

এই দু'জনেই এই মুহুর্তে (২.x, ৪.x) উপাদানগুলির একসাথে গোষ্ঠী হিসাবে ব্যবহার করার জন্য ব্যবহার করা হয়নি যা অন্য পৃষ্ঠায় (যেমন divবা span) রেন্ডার হবে introduce

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>

গিটহাবের এই আলোচনাটি পড়তে আপনি আরও বিশদ জানতে পারেন ।

মনে রাখবেন যে ৪.x এ অবমূল্যায়ন <template>করা হয়েছে এবং এতে পরিবর্তন করা হয়েছে <ng-template>।

ব্যবহার

<ng-container>আপনি নেস্টেড কাঠামোগত নির্দেশনা জন্য কোন সাহায্যকারী উপাদান প্রয়োজন হলে মত *ngIfবা *ngForঅথবা আপনি যেমন একটি কাঠামোগত নির্দেশ ভিতরে একটির বেশি উপাদান মোড়ানো করতে চান তাহলে;
<ng-template>আপনি একটি দৃশ্য প্রয়োজন "SNIPPET" আপনার ব্যবহার করা বিভিন্ন স্থানে স্ট্যাম্প করতে চান ngForTemplate, ngTemplateOutletঅথবা createEmbeddedView()।

Question 3

ng-templateমত কাঠামোগত নির্দেশ জন্য ব্যবহার করা হয় ng-if, ng-forএবং ng-switch। যদি আপনি স্ট্রাকচারাল নির্দেশনা ব্যতীত এটি ব্যবহার করেন তবে কিছুই ঘটে না এবং এটি রেন্ডার হবে।

ng-containerযখন আপনার কাছে উপযুক্ত মোড়ক বা পিতা-পাত্র নেই have বেশিরভাগ ক্ষেত্রে, আমরা ব্যবহার করি divবা spanএকটি ধারক হিসাবে তবে এমন ক্ষেত্রে যখন আমরা একাধিক কাঠামোগত নির্দেশনা ব্যবহার করতে চাই। তবে আমরা কোনও উপাদানের উপর একাধিক কাঠামোগত নির্দেশনা ব্যবহার করতে পারি না, সেক্ষেত্রে ng-containerধারক হিসাবে ব্যবহার করা যেতে পারে

Question 4

NG-টেমপ্লেট রেন্ডারিং HTML- এর জন্য একটি কৌণিক উপাদান। এটি কখনই সরাসরি প্রদর্শিত হয় না। কাঠামোগত নির্দেশের জন্য ব্যবহার করুন যেমন: এনজিআইএফ, এনজিফোর্ড, এনজিউইচ, .. উদাহরণ :
<ng-template>

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

কৌণিক <ng-template>হোস্ট উপাদানটির চারপাশে মোড়ানো এ জাতীয় উপাদানটিকে * এনজিআইফ বৈশিষ্ট্যটি অনুবাদ করে ।

<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>

এটি কাজ করবে না। কারণ কিছু এইচটিএমএল উপাদানগুলির জন্য সমস্ত তাত্ক্ষণিক শিশুদের নির্দিষ্ট ধরণের হওয়া দরকার। উদাহরণস্বরূপ, <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ইত্যাদির সাথে ব্যবহার করার কথা is

Question 8

<ng-container>অ্যাঙ্গুলার। কম্পোনেন্ট। 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>

এইভাবে, যদি আমি কোনও এইচটিএমএল <table>থেকে অন্য কোনও কিছুতে পরিবর্তন করতে চাই, যেমন <div>ফ্লেক্সবক্স স্টাইলিং সহ একগুচ্ছ , তবে আমার অভ্যন্তরের ভিতর থেকে লুপিং যুক্তি (বা এটি পুরোপুরি হারাতে ঝুঁকিপূর্ণ) তৈরি করতে হবে না <tr>। এটি লুপিং (এনজিফোর্ড) যুক্তিকে সাধারণ এইচটিএমএল দ্বারা আংশিকভাবে অস্পষ্ট করা থেকে বিরত রাখে।