معرفی
این مقاله نحوه پیکربندی انواع مختلف صحافی در Angular را نشان می دهد. این مقاله با Event Data binding شروع می شود. پس از آن، ویژگی های دو طرفه Binding، Event Emitter، Input و Output را با توضیح کد منبع نشان می دهد. در پایان، مقاله ngModel را مورد بحث قرار می دهد. لطفاً برای درک سایر اتصالات Interpolation و Property Binding به مقاله قدیمی من Angular Bindings قسمت اول مراجعه کنید.
پیوند داده رویداد
انواع DataBinding که با آنها برخورد کرده اید Interpolation و Property Binding هستند. در هر دوی این موارد، داده ها از یک جزء به یک عنصر جریان می یابد. به کد منبع زیر نگاه کنید. جریان داده در یک جهت از Component ( sCSharpImgURL ) به عنصر ([src]) اتفاق میافتد.
<img [src]="sCSharpImgURL" style="height:130px" /> <br />
در Event Databinding، مفهوم کمی متفاوت از Property Binding است. در اینجا، داده ها از یک عنصر به یک جزء جریان می یابد. این یک مورد معمول در هر برنامه رابط کاربری است که کاربر روی دکمه فرمان کلیک میکند، ماوس را حرکت میدهد، روی کلید خاصی در صفحهکلیدی که رویداد راهاندازی میکند کلیک میکند، و روش مناسبی را که برای رسیدگی به آن بر اساس نیاز برنامه نیاز داریم فراخوانی میکند. مجموعه ای از عملکردهای مشابه را می توان در Angular نیز پیاده سازی کرد. به کد منبع زیر نگاه کنید.
<button (click)="onSave()">ذخیره دما</button>
Binding به رویدادهای کلیک گوش می دهد و پس از کلیک روی دکمه، روش OnSave را فرا می خواند. نام رویداد در داخل براکت ها، متد OnSave هدف را شناسایی کرده و آن را فراخوانی می کند.
$ رویداد
هنگامی که یک رویداد مطرح می شود، کنترل کننده متد را اجرا می کند و پاسخ را ارسال می کند. هنگامی که یک رویداد مطرح می شود، چگونه می خواهیم پارامترها را به کنترل کننده منتقل کنیم؟ در شرایط خاص، ممکن است مجبور شویم پس از مطرح شدن رویداد، پارامترهای کمی را به متد هدف ارسال کنیم. با آن اطلاعات پارامتر، فقط روش هدف پردازش خواهد شد. چه کسی آن اطلاعات را حمل خواهد کرد؟ بله، رویداد $ این کار را انجام می دهد. $event تمام اطلاعات مانند رویداد و مقادیر داده را از کنترل کننده رویداد به مؤلفه یا عنصر مطابق با هدف منتقل می کند. بیایید یک مثال دیگر را در Event Binding ببینیم. نگاهی به این کد منبع بیندازید.
<input [value]="EmployeeCurrentObj.EmployeeName" (input)="EmployeeCurrentObj.EmployeeName=$event.target.value" />
این کد منبع، ویژگی ارزش را با EmployeeName تنظیم میکند زمانی که ویژگی value از EmployeeName «Rameshkartik» به «Rajesh» تغییر میکند، رویداد ورودی که در حال گوش دادن به تغییرات است، از طریق $event.target.value و مقدار تغییر یافته به EmployeeName به روز می شود. کد منبع ضمیمه درک بهتری ارائه می دهد.
امیتر رویداد
جادوی دستورالعمل ها یک امیتر ایجاد می کند و یک خاصیت را آشکار می کند. امیتر چیست؟
معنای عام نشر، «تولید و تخلیه» است، یعنی انسان قادر است چیزی را تولید کند و آن را به شکل دیگری تخلیه کند. اگر همان معنی «تولید و تخلیه» را در موارد فنی - Angular اعمال کنید، Event Emitter را درک خواهید کرد. فرض کنید که یک نمونه مسئول یا قادر است مجموعه ای از اشیاء (برای مثال: کارکنان) را در یک ساختار شبکه فهرست کند. هر آیتم در گرید یک شیء Employee است که دارای EmployeeName، EmployeeCode و EmployeeSalary است. و کل مجموعه کارمندان نام دارد. و اگر کاربر بخواهد یک مقدار ردیف خاص را انتخاب کند یا یک شیء کارمند خاص را انتخاب کند، کاربر روی پیوند انتخاب که در هر سطر موجود است کلیک می کند تا شیء کارمند را واکشی کند. به محض اینکه کاربر بر روی Select Link کلیک کرد، دستورالعمل EventEmitter.emit را برای فعال کردن یک رویداد فراخوانی می کند. شئ Emitter شیء row خاص Employee را منتشر می کند. به این کد منبع نگاه کنید، درک بهتری خواهید داشت.
- <grid-ui [grid-Data]="Employees"
- [grid-entity]="Employee"
- (grid-output)="Select($event)">
- </grid-ui>