<ng-container> বনাম <স্টেম্পলেট>

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> একটি গোষ্ঠী উপাদান যা স্টাইল বা বিন্যাসে হস্তক্ষেপ করে না কারণ কৌণিক এটি ডিওমে রাখে না।

(...)

<ng-container> একটি বাক্য গঠন উপাদান কৌণিক পার্সার দ্বারা স্বীকৃত হয়। এটি কোনও নির্দেশিকা, উপাদান, শ্রেণি বা ইন্টারফেস নয়। এটি জাভাস্ক্রিপ্টের কোঁকড়ানো ধনুর্বন্ধনী হিসাবে যদি ব্লক হয়:

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

এই ধনুর্বন্ধনীগুলি ছাড়া, জাভাস্ক্রিপ্ট কেবল তখনই প্রথম বিবৃতি কার্যকর করে যখন আপনি শর্তসাপেক্ষে তাদের সকলকে একটি একক ব্লক হিসাবে কার্যকর করতে চান। <ng-container> সন্তুষ্ট কৌণিক টেমপ্লেটে একটি অনুরূপ প্রয়োজন নেই।

আসল উত্তর:

মতে এই টান অনুরোধ :

<ng-container> লজিক্যাল পাত্রে এটি নোডকে গ্রুপ করতে ব্যবহৃত হতে পারে তবে নোড হিসাবে ডোম ট্রিতে রেন্ডার করা হয় না।

<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>সংকলনের সময় থাকলেও এটি পরে মুছে ফেলা হয়, ডিওমে কোনও অতিরিক্ত ট্যাগ নেই। আমি বিশ্বাস করি যে ম্যানুয়ালটিতে অবহেলিত তথ্য রয়েছে বা এটিতে কেবল ভুল। যাইহোক, <ng-container> এবং <template> এর মধ্যে মূল পার্থক্যটি নির্দেশ করার জন্য ধন্যবাদ।

— এস্তাস ফ্লাস্ক

মুক্তির আগে, কৌণিক রেন্ডার হয়েছিল <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>

এবং এটি সূক্ষ্ম কাজ করবে। যাইহোক, এখন আমাদের একটি গ্রহাণু * এর পরিবর্তে বন্ধনী [এনজিআই] দরকার, এবং এটি বিভ্রান্তিকর ( https://github.com/angular/angular.io/issues/2303 )

এই কারণে একটি আলাদা স্বরলিপি তৈরি করা হয়েছিল, যেমন:

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

উভয় সংস্করণ একই ফলাফল তৈরি করবে (কেবল এইচ 1 এবং পি ট্যাগ রেন্ডার হবে)। দ্বিতীয়টি পছন্দ করা হয় কারণ আপনি সর্বদা মত * এনজিআই ব্যবহার করতে পারেন।

Comments

চমৎকার ব্যাখ্যা, এটি কীভাবে ng-containerনির্দেশনামূলক ধারণা এসেছিল তার ওভারভিউ সরবরাহ করে , ধন্যবাদ :)

— পঙ্কজ পার্কার

Answer 3

এর জন্য ইমো ব্যবহারের ক্ষেত্রে হ'ল ng-containerসরল প্রতিস্থাপন যার জন্য একটি কাস্টম টেম্পলেট / উপাদানটি ওভারকিল হবে। এপিআই ডকটিতে তারা নিম্নলিখিতগুলি উল্লেখ করে

একাধিক রুট নোডগুলি গ্রুপ করতে একটি এনজি-কনটেইনার ব্যবহার করুন

এবং আমি অনুমান করি যে এগুলি সম্পর্কে: গ্রুপিং স্টাফ।

সচেতন থাকুন যে ng-containerনির্দেশিকাটি কোনও টেম্পলেটটির পরিবর্তে দূরে পড়ে যেখানে এর নির্দেশকটি আসল সামগ্রীটি মোড় করে।

Comments

এই উল্লেখের সাথে আপনার কি কোনও লিঙ্ক আছে? এই মুহূর্তে উপরের লিঙ্কযুক্ত ডকুমেন্টেশন এবং বহুবচন কেস ডকুমেন্টেশনে এটি ব্যবহৃত হচ্ছে: Angular.io/docs/ts/latest/api/common/index/… ।

— কোসলুন

কৌণিক.আইও

— ম্যাট

ধন্যবাদ, ডকুমেন্টস সাইটটিতে নথিপত্রের অভাব সম্পর্কিত একটি সমস্যা তৈরি করেছে এবং এই উত্তরটি উল্লেখ করেছে: github.com/angular/angular.io/issues/2553

— কোসলুন

ডাউনভোটেড -১। এনজি-কন্টেইনার কোনও কাস্টম টেম্পলেট এড়ানো সম্পর্কে নয়, এটি শর্তযুক্ত সামগ্রী রাখতে সক্ষম যা কোনও ধারকটিতে আবৃত নয়। প্রকৃতপক্ষে একটি কাস্টম টেমপ্লেট একটি মোড়কের ধারককে পরিচয় করিয়ে দেবে, যথা নির্দেশিকা ট্যাগ নিজেই।

— কার্লো রুসেন

তুমি একদম সঠিক. নিশ্চিত যে একটি পার্থক্য যা উল্লেখ করা প্রয়োজন। আমি আমার পোস্টে ইঙ্গিতটি যুক্ত করেছি।

— ম্যাট

Answer 4

আপনি * এনজিআইএফ এবং * এনজিফোর্ডের সাথে একটি টেবিল ব্যবহার করতে চাইলে এটির জন্য একটি ব্যবহারের কেস - টিডি / তমিতে একটি ডিভ লাগানো সারণীর উপাদানটিকে খারাপ ব্যবহার করবে -। আমি এই সমস্যার সম্মুখীন হন এবং যে উত্তর ছিল।

Comments

তবে একই জিনিস দিয়ে অর্জন করা যায় <template [ngIf]...>। প্রশ্নটি ছিল এই দুটি পদ্ধতির মধ্যে পার্থক্য।

— এস্তাস ফ্লাস্ক

ওহ, আমার খারাপ, এখানে উত্তর দেওয়া হবে বলে মনে হচ্ছে stackoverflow.com/questions/40529537/… তারা কেবল বলেছে এটি কেবল একটি বাক্য গঠন পার্থক্য

— shakram02