আমি কৌনিক 2 নিয়ে কাজ করছি এবং আমি এরকম কিছু পেয়েছি
<input #searchBox (keyup)="search(searchBox.value)"এবং এটি কাজ করে।
যাইহোক, আমি # সার্চবক্সের অর্থ বুঝতে পারি না । আমি ডাকেও পরিষ্কার কিছু খুঁজে পাইনি।
কেউ কি আমাকে বোঝাতে পারে যে এটি কীভাবে কাজ করে?
উত্তর:
এটি অ্যাঙ্গুলার 2 টেম্প্লেটিং সিস্টেমে সিনট্যাক্স ব্যবহৃত হয় যা ডোম উপাদানগুলিকে ভেরিয়েবল হিসাবে ঘোষণা করে।
এখানে আমি আমার উপাদানটি একটি টেম্পলেট URL দিচ্ছি:
import {Component} from 'angular2/core';
@Component({
selector: 'harrys-app',
templateUrl: 'components/harry/helloworld.component.html'
})
export class HarrysApp {}
টেমপ্লেটগুলি HTML রেন্ডার করে। কোনও টেম্পলেটে আপনি ডেটা, সম্পত্তি বাঁধাই এবং ইভেন্ট বাইন্ডিং ব্যবহার করতে পারেন। এটি নিম্নলিখিত বাক্য গঠন দ্বারা সম্পন্ন:
# - পরিবর্তনশীল ঘোষণা
() - ইভেন্ট বাঁধাই
[] - সম্পত্তি বাধ্যতামূলক
[()] - দ্বিমুখী সম্পত্তি বাধ্যতামূলক
{{ }} - বিরক্তি
* - কাঠামোগত দিকনির্দেশনা
#সিনট্যাক্স স্থানীয় পরিবর্তনশীল নামের যা রেফারেন্স করে DOM একটি টেমপ্লেট বস্তু ঘোষণা করতে পারেন। যেমন
<span [hidden]="harry.value">*</span>
<input type="text" #harry>
{{ harry.value }}
<input #bla style="display: none;" value="Foo" /<div> {{bla.value}} </div>। ফু ডিভ প্রদর্শিত হয়।
আপনি যখন এই # সন্ধানবক্সটি সেট করেন, আপনি আপনার টাইপস্ক্রিপ্টে এই ইনপুটটি পেতে পারেন
@ViewChild('searchBox') searchBox;
console.info(searchBox.nativeElement.value)
সম্পাদনা
কিছু উদাহরণ যুক্ত করা হচ্ছে: https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p= পূর্বরূপ
অ্যাঙ্গুলারটাইন.কম থেকে :
টেম্পলেট রেফারেন্স ভেরিয়েবলগুলি একটি সামান্য মণি যা কৌণিকের সাহায্যে অনেকগুলি সুন্দর কাজ করতে দেয়। আমি সেই বৈশিষ্ট্যটিকে সাধারণত "হ্যাশট্যাগ সিনট্যাক্স" বলি কারণ ভাল, এটি কোনও টেমপ্লেটের কোনও উপাদানের রেফারেন্স তৈরি করতে একটি সাধারণ হ্যাশট্যাগের উপর নির্ভর করে:
<input #phone placeholder="phone number">উপরের সিনট্যাক্সটি যা করে তা মোটামুটি সহজ: এটি ইনপুট উপাদানটির একটি রেফারেন্স তৈরি করে যা পরে আমার টেমপ্লেটে ব্যবহার করা যেতে পারে। নোট করুন যে এই ভেরিয়েবলের সুযোগ হ'ল সম্পূর্ণ এইচটিএমএল টেমপ্লেট যেখানে রেফারেন্সটি সংজ্ঞায়িত করা হয়েছে।
উদাহরণস্বরূপ, ইনপুটটির মান পেতে আমি কীভাবে সেই রেফারেন্সটি ব্যবহার করতে পারি তা এখানে:
<!-- phone refers to the input element --> <button (click)="callPhone(phone.value)">Call</button>মনে রাখবেন যে, ফোন বোঝায় HTMLElement জন্য বস্তু উদাহরণস্বরূপ ইনপুট । ফলস্বরূপ, ফোনের যে কোনও এইচটিএমলেমেন্টের সমস্ত বৈশিষ্ট্য এবং পদ্ধতি রয়েছে (আইডি, নাম, অভ্যন্তরীণ এইচটিএমএল, মান ইত্যাদি)
বৈধতার পক্ষে খুব বেশি প্রয়োজন হয় না এমন সরল আকারে এনজিএমডেল বা অন্য কোনও ধরণের ডেটা বাইন্ডিং ব্যবহার এড়াতে উপরের একটি দুর্দান্ত উপায়।
এটি উপাদানগুলির সাথেও কাজ করে?
উত্তরটি হল হ্যাঁ!
... এর সর্বোত্তম অংশটি হ'ল আমরা আসল উপাদান উদাহরণ, হ্যালো ওয়ার্ল্ড কম্পোনেন্টের একটি রেফারেন্স পাচ্ছি, সুতরাং আমরা সেই উপাদানটির যে কোনও পদ্ধতি বা বৈশিষ্ট্য অ্যাক্সেস করতে পারি (সেগুলি ব্যক্তিগত বা সুরক্ষিত হিসাবে ঘোষণা করা হলেও, অবাক করার মতো) :
@Component({ selector: 'app-hello', // ... export class HelloComponent { name = 'Angular'; }[...]
<app-hello #helloComp></app-hello> <!-- The following expression displays "Angular" --> {{helloComp.name}}
এটি একটি টেম্পলেট ভেরিয়েবল তৈরি করে যা উল্লেখ করে
inputউপাদান যদি উপাদান একটি প্লেইন DOM উপাদান হল#foo="bar"কখন barযেমন ব্যবহার করা হয় @Directive({ // or @Component
...
exportAs: 'bar'
})
এই জাতীয় টেম্পলেট ভেরিয়েবলটি টেমপ্লেট বাইন্ডিংগুলিতে বা এর মতো উপাদান অনুসন্ধানগুলিতে উল্লেখ করা যেতে পারে
@ViewChild('searchBox') searchBox:HTMLInputElement;ngModelফর্ম একীকরণের জন্য। আপনি ছাড়াও অন্যান্য সমস্ত ধরণের বাইন্ডিং করতে পারেন ngModel।
ngAfterViewInitআসলে এটি আমদানি না করে কীভাবে ব্যবহার করেছেন? এবং বাস্তবায়ন? এটি প্লামকারে একটি বিল্ড ইন বৈশিষ্ট্য?
#searchBoxউপাদানটিতে থাকা আপনাকেsearchBox.valueকীআপ হ্যান্ডলারে ব্যবহার করতে দেয় in