কৌণিক 2 টেম্পলেটগুলিতে লেট- * কী?

Question

আমি একটি কৌণিক 2 টেম্পলেট এর ভিতরে একটি অদ্ভুত অ্যাসাইনমেন্ট সিনট্যাক্স জুড়ে এসেছি।

<template let-col let-car="rowData" pTemplate="body">
    <span [style.color]="car[col.field]">{{car[col.field]}}</span>
</template>

এটি প্রদর্শিত হয় let-colএবং let-car="rowData"দুটি নতুন ভেরিয়েবল তৈরি করে colএবং carএটি টেম্পলেটটির অভ্যন্তরে আবদ্ধ হতে পারে।

সূত্র: https://www.primefaces.org/primeng/#/datatable/templating

এই যাদুকরী let-*বাক্য গঠন বলা হয়?

এটা কিভাবে কাজ করে?

মধ্যে পার্থক্য কি let-somethingএবং let-something="something else"?

Comments

@NiekT। এটি আলাদা, আসুন- * কৌণিক 2 এ টেমপ্লেট ভেরিয়েবল স্কোপিং

— স্টার্লিং আর্চার

angular.io/docs/ts/latest/guide/… "লেট" (একটি স্পেস সহ) শব্দটি অনুসন্ধান করুন এবং নবমটির আশেপাশে যান। এই টেমপ্লেটটি ভেরিয়েবল কী করে সে সম্পর্কে একটি ভাল ব্যাখ্যা রয়েছে

— স্টার্লিং আরচার

@ স্টার্লিংআরচার সংশোধন করার জন্য ধন্যবাদ, আমি নিজে জেএস এবং অ্যাঙ্গুলারের কাছে বেশ নতুন।

— নডন দার্কে

Answer 1

কৌণিক 5 আপডেট করুন

ngOutletContext নামকরণ করা হয়েছিল ngTemplateOutletContext

Https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29 দেখুন

মূল

টেমপ্লেটগুলি ( <template>বা <ng-template>4.x থেকে) এম্বেড করা ভিউ হিসাবে যুক্ত করা হয় এবং একটি প্রসঙ্গে পাস করা হয়।

সঙ্গে let-colপ্রসঙ্গ সম্পত্তি $implicitহিসাবে উপলব্ধ করা হয় colবাইন্ডিং জন্য টেম্পলেট মধ্যে। সঙ্গে let-foo="bar"প্রসঙ্গ সম্পত্তি barহিসাবে উপলব্ধ করা হয় foo।

উদাহরণস্বরূপ আপনি যদি কোনও টেম্পলেট যুক্ত করেন

<ng-template #myTemplate let-col let-foo="bar">
  <div>{{col}}</div>
  <div>{{foo}}</div>
</ng-template>

<!-- render above template with a custom context -->
<ng-template [ngTemplateOutlet]="myTemplate"
             [ngTemplateOutletContext]="{
                                           $implicit: 'some col value',
                                           bar: 'some bar value'
                                        }"
></ng-template>

আরও দেখুন এই উত্তর এবং ViewContainerRef # createEmbeddedView ।

*ngForএছাড়াও এইভাবে কাজ করে। ক্যানোনিকাল বাক্য গঠন এটিকে আরও সুস্পষ্ট করে তোলে

<ng-template ngFor let-item [ngForOf]="items" let-i="index" let-odd="odd">
  <div>{{item}}</div>
</ng-template>

যেখানে NgForপ্রতিটি করে DOM থেকে এমবেড দর্শন হিসাবে টেমপ্লেট যোগ itemএর itemsএবং কয়েক মান (যোগ করা item, index, oddপ্রসঙ্গ)।

একাধিক পরামিতিগুলি পাস করতে $ ইমপ্লিট ব্যবহার করেও দেখুন

Comments

ব্যাখ্যা করার জন্য ধন্যবাদ ngOutletContext। এটি আমি ইতিমধ্যে জানতাম এবং ডকুমেন্টেশনে যে তথ্যটি খুঁজে পাইনি তার মধ্যে অন্তর্ভুক্ত লিঙ্ক ছিল।

— স্টিভেন লাইকেন্স

আপনারা ngTemplateOutletContextকৌনিক ৫ টির মুক্তির পরামর্শে যেমন বলা হয়েছিল বলে আমি মনে করি না ডকসও এটিকে হ্রাস করা সম্পর্কে কিছু উল্লেখ করে না। angular.io/api/common/NgTemplateOutlet

— জেসি

5 এখনও মুক্তি পায় না। ডক্স কী দেখায় তা নিশ্চিত নয়। চেঞ্জলগের তখন থেকে এটি সম্পর্কে নতুন কিছু নেই।

— গন্টার জ্যাচবাউয়ার 21

এই উত্তরের জন্য আপনাকে ধন্যবাদ, *সিনট্যাক্স কী করছে সে সম্পর্কে ডকুমেন্টেশনের একটি শক্ত অভাব রয়েছে ।

— dook

দ্বিতীয় এনজি-টেম্পলেট হওয়া উচিত নয় (এনজিটেম্পলেটআউটলেট সহ একটি) সত্যই এনজি-টেম্পলেট। এনজি-পাত্রে আরও ভাল হতে পারে? আমার অনুমান উভয়ই কাজ করবে তবে এনজি-ধারক শব্দার্থগতভাবে আরও সঠিক। নাকি আমি ভুল করছি?

— ওন্দ্রেজ পিটারকা

Answer 2

কৌণিক মাইক্রোসিন্ট্যাক্স আপনাকে একটি কমপ্যাক্ট, বন্ধুত্বপূর্ণ স্ট্রিংয়ে একটি নির্দেশিকা কনফিগার করতে দেয়। মাইক্রোসাইন্টাক্স পার্সার সেই স্ট্রিংটি এর উপরের বৈশিষ্ট্যগুলিতে অনুবাদ করে <ng-template>। লেট কীওয়ার্ডটি কোনও টেম্পলেট ইনপুট ভেরিয়েবল ঘোষণা করে যা আপনি টেমপ্লেটের মধ্যে উল্লেখ করেন।