অ্যাঙ্গুলার 2-তে বন্ধনী, বন্ধনী এবং অ্যাসিরিস্টসের মধ্যে পার্থক্য কী?

Question

আমি কৌনিক ওয়েবসাইটটিতে কৌনিক 1 থেকে 2 দ্রুত রেফারেন্সটি পড়ছি এবং একটি জিনিস যা আমি পুরোপুরি বুঝতে পারি নি তা হল এই বিশেষ চরিত্রগুলির মধ্যে পার্থক্য। উদাহরণস্বরূপ, যেটি তারকাচিহ্ন ব্যবহার করে:

<tr *ngFor="#movie of movies">
  <td>{{movie.title}}</td>
</tr>

আমি এখানে বুঝতে পারি যে হ্যাশ (#) চিহ্নটি movieস্থানীয় টেম্পলেট ভেরিয়েবল হিসাবে সংজ্ঞায়িত করে , তবে তারার আগে ngForকী বোঝায়? এবং, এটি প্রয়োজনীয়?

পরবর্তী, বন্ধনী ব্যবহার করে এমন উদাহরণগুলি:

<a [routerLink]="['Movies']">Movies</a>

আমি কিছুটা বুঝতে পারি যে কাছাকাছি বন্ধনীগুলি routerLinkএটিকে এইচটিএমএল বৈশিষ্ট্য / কৌণিক নির্দেশের সাথে আবদ্ধ করে। এর অর্থ কি এই যে এঙ্গুলারের পক্ষে কোনও অভিব্যক্তি মূল্যায়ন করার জন্য তারা পয়েন্টার? ভালো লেগেছে [id]="movieId"সমতুল্য হবে id="movie-{{movieId}}"কৌণিক 1?

শেষ অবধি, প্রথম বন্ধনীগুলি:

<button (click)="toggleImage($event)">

এগুলি কি কেবল ডিওএম ইভেন্টের জন্য ব্যবহৃত হয় এবং আমরা কি অন্যান্য ইভেন্টের মতো (load)="someFn()"বা ব্যবহার করতে পারি (mouseenter)="someFn()"?

আমি অনুমান করি আসল প্রশ্নটি হচ্ছে, এই চিহ্নগুলির কি Angular 2 এ একটি বিশেষ অর্থ রয়েছে এবং প্রতিটিটি কখন ব্যবহার করবেন তা জানার সহজতম উপায় কী ? ধন্যবাদ !!

Answer 1

সমস্ত বিশদ এখানে পাওয়া যাবে: https://angular.io/docs/ts/latest/guide/template-syntax.html

• directiveName- কাঠামোগত দিকনির্দেশনার জন্য হ্যান্ড হ্যান্ড ফর্ম যেখানে দীর্ঘ ফর্মটি কেবলমাত্র <template>ট্যাগগুলিতে প্রয়োগ করা যেতে পারে । সংক্ষিপ্ত রূপটি উপাদানটিকে জড়িয়ে দেয় যেখানে এটি প্রয়োগ করা হয় <template>।

• [prop]="value"বৈশিষ্ট্য ( @Input()একটি কৌণিক উপাদান বা দিকনির্দেশক বা একটি ডিওএম উপাদানের একটি সম্পত্তি) এর সাথে আবদ্ধ বস্তুর জন্য ।
  বিশেষ ফর্ম রয়েছে:

  • [class.className] এটি সক্ষম / অক্ষম করতে একটি CSS শ্রেণীর সাথে জড়িত
  • [style.stylePropertyName] একটি শৈলীর সম্পত্তিতে আবদ্ধ
  • [style.stylePropertyName.px] একটি প্রিসেট ইউনিট সহ একটি শৈলীর সম্পত্তিতে আবদ্ধ
  • [attr.attrName] একটি মানকে একটি গুণকে আবদ্ধ করে (DOM এ দৃশ্যমান, যখন বৈশিষ্ট্যগুলি দৃশ্যমান হয় না)
  • [role.roleName] এআরআইএ রোল অ্যাট্রিবিউটের সাথে আবদ্ধ (এখনও উপলব্ধ নয়)

• prop="{{value}}"কোনও সম্পত্তির সাথে একটি মানকে বেঁধে রাখে। মানটি স্ট্রিংফাইড হয়েছে (ওরফে ইন্টারপোলেশন)

• (event)="expr"ইভেন্ট হ্যান্ডলারকে একটি @Output()বা ডিওএম ইভেন্টের সাথে আবদ্ধ করে

• #varবা #varপ্রসঙ্গ উপর নির্ভর করে বিভিন্ন ফাংশন আছে

  • একটি *ngFor="#x in y;#i=index"স্কোপে পুনরাবৃত্তির জন্য ভেরিয়েবলগুলি তৈরি করা হয়
    (বিটা .১ this এ এটিকে * এনজিফোর্স = "y এ x দেওয়া যাক; i = সূচক" to) এ পরিবর্তন করা হয়)
  • একটি ডোম উপাদানটিতে উপাদানটির <div #mydiv>একটি রেফারেন্স
  • একটি কৌণিক উপাদানটিতে উপাদানটির একটি রেফারেন্স
  • এমন একটি উপাদানের উপর যা একটি কৌণিক উপাদান বা একটি কৌণিক নির্দেশিকা যেখানে exportAs:"ngForm"সংজ্ঞায়িত হয়, #myVar="ngForm"এই উপাদান বা নির্দেশের একটি রেফারেন্স তৈরি করে।

Comments

অথবা bind-জন্য []এবং on-জন্য ()অথবা <template [ngFor]>জন্য *ngFor।

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

[(এনজিমোডেল)] এর অর্থ বর্গাকার বন্ধনীগুলির মধ্যে বন্ধনী মানে কী?

— উসমান

দুটি উপায় (একটি box6 মধ্যে "কলা বলা হয়) বাঁধাই। এটা (অথবা সংক্ষিপ্ত রূপকে) সমন্বয় [ngModel]="foo" (ngModelChange)="foo = $event"যেখানে প্রথম অংশ আপডেট ngModelসম্পত্তি ( @Input() ngModel;এর NgModelনির্দেশ ) when foo` পরিবর্তন এবং 2nd অংশ আপডেট fooযখন @Output() ngModelChange;(এর NgModelনির্দেশিকা) । নির্গত একটি ইভেন্ট NgModelবেঁধে মান উপাদান এবং উপাদান গঠন করতে ব্যবহৃত হয়। [(bar)]কোনো ব্যবহার করা যেতে পারে @Input() bar; @Output() barChange;, আপনার নিজের উপাদান সমন্বয় এছাড়াও।

— গুন্টার Zöchbauer

@ GünterZöchbauer মধ্যে পার্থক্য কি [prop]="value"এবং prop="{{value}}"বাক্য গঠন ছাড়া অন্য কিছু? উভয়ই উপাদানতে মান পাস করতে পারে @Input() value;।

— ডাইপিক্স

@ ডাইপিক্স যে [prop]="value"কোনও ধরণের মান নির্ধারণ করতে পারে, অ্যাসাইনমেন্টের আগে prop="{{value}}"সর্বদা স্ট্রিংফাই করে valueএবং তাই অবজেক্টগুলি পাস করার জন্য অকেজো।

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

Answer 2

[]- লক্ষ্য দেখার জন্য ডেটা উত্স থেকে সম্পত্তি একত্রে বাধ্যতামূলক । যেমন

{{expression}}
[target]="expression"
bind-target="expression"

এর পরিবর্তে আমরা বাইন্ড ব্যবহার করতে পারি []

()-> ইভেন্ট উত্সকে লক্ষ্য উত্স থেকে ডেটা উত্স পর্যন্ত একমুখী inding

(target)="statement"
on-target="statement"

আমরা () এর পরিবর্তে অন ব্যবহার করতে পারি

[()]- একটি বাক্সে দ্বিপথ বাঁধাই কলা

[(target)]="expression"
bindon-target="expression"

এর পরিবর্তে আমরা বিনডন ব্যবহার করতে পারি [()]

Answer 3

ইতিমধ্যে উল্লিখিত হিসাবে, কৌণিক ডকুমেন্টেশন, বিশেষত "নায়ক টিউটোরিয়াল", এটি আরও গভীরভাবে ব্যাখ্যা করে। আপনি যদি এটি পরীক্ষা করে দেখতে চান তবে লিঙ্কটি এখানে ।

প্যারেনথেসিসগুলি আপনি যে উপাদানটির উপর কাজ করছেন তার ঘটনাগুলি যেমন আপনার উদাহরণের মতো একটি বোতামে ক্লিক করুন; এটি মৌসাউন্ড, কীআপ, অনিসিলেক্ট বা কোনও উপাদান / ইভেন্টের জন্যও হতে পারে এবং কলটির =জন্য প্রথম বন্ধনী ব্যবহার করে কল করার পদ্ধতিটির নাম what এই পদ্ধতিটি আপনার উপাদান শ্রেণিতে সংজ্ঞায়িত করা উচিত, অর্থাত:

<element (event)="method()"></element>

বন্ধনী অন্যভাবে কাজ করে। তারা আপনার শ্রেণি থেকে ডেটা পাবে - ইভেন্টটি পাঠাচ্ছে এমন প্রথম বন্ধনীগুলির বিপরীতে - সুতরাং সাধারণ উদাহরণটি হ'ল এর মতো শৈলীর ব্যবহার:

<element [ngStyle]="{display:someClassVariable}">

দেখা? আপনি আপনার মডেল / শ্রেণির উপর ভিত্তি করে উপাদানটিকে একটি স্টাইল দিচ্ছেন।

এর জন্য আপনি ব্যবহার করতে পারতেন ...

<element style="display:{{ModelVariable}};">

পুনঃসংশোধনটি হ'ল আপনি যে জিনিসগুলি স্ক্রিনে মুদ্রণ করবেন সেগুলির জন্য আপনি দ্বিগুণ কোঁকড়ানো বন্ধনী ব্যবহার করেন:

<h1>{{Title}}</h1>

আপনি যা ব্যবহার করুন না কেন, আপনি যদি সামঞ্জস্য বজায় রাখেন তবে এটি আপনার কোডের পঠনযোগ্যতায় সহায়তা করবে।

শেষ অবধি, আপনার *প্রশ্নের জন্য এটি দীর্ঘতর ব্যাখ্যা, তবে এটি খুব গুরুত্বপূর্ণ: এটি কিছু পদ্ধতির বাস্তবায়নকে বিমূর্ত করে তোলে যা অন্যথায় আপনাকে ngForকাজ করার জন্য করতে হবে ।

একটি গুরুত্বপূর্ণ আপডেট হ'ল ngForআপনি এখন আর হ্যাশ ব্যবহার করবেন না; letপরিবর্তে আপনাকে নিম্নলিখিত হিসাবে ব্যবহার করতে হবে:

<tr *ngFor="let movie of movies">
    <td>{{movie.title}}</td>
</tr>

একটি সর্বশেষ উল্লেখযোগ্য বিষয় হ'ল উপরের সমস্তগুলি আপনার উপাদানগুলির জন্যও প্রযোজ্য, যেমন আপনি যদি নিজের উপাদানটিতে কোনও পদ্ধতি তৈরি করেন তবে এটি ব্যবহার করে ডাকা হবে ():

<my-owncomponent 
    (onSearched)="MethodToCall()" 
    [MyInputData]="SearchParamsArray"></my-owncomponent>