روشی زیبا برای عبور تابع trackBy در برنامه های Angular ( انگولار)

روشی زیبا برای عبور تابع trackBy در برنامه های Angular ( انگولار)

اگر می خواهید مجموعه ای از آیتم ها را در یک برنامه Angular رندر کنید، احتمالاً از دستورالعمل داخلی NgForOf استفاده خواهید کرد. در بیشتر مواقع کاملاً خوب کار می کند، با این حال سناریوهایی وجود دارد که ممکن است لازم باشد یک تابع trackBy سفارشی را به عنوان آرگومان ارسال کنید، به عنوان مثال. هنگامی که داده ها را به روز می کنید یا فیلتر سمت مشتری را انجام می دهید.روشی زیبا برای عبور تابع trackBy در برنامه های Angular ( انگولار)
عبور از trackBy از طریق کامپوننت

انجام پروژه در فریلنس پروژه

ساده ترین راه برای عبور تابع trackBy این است که آن را در سطح مؤلفه تعریف کرده و به دستورالعمل NgForOf ارسال کنید:

راه حل فوق کار می کند، اما دارای معایب زیر است:

مؤلفه دارای کد اضافی مورد نیاز فقط برای دستورالعمل NgForOf است،

راه حل قابل استفاده مجدد نیست – شما باید تابع را در هر جزء تعریف و ارسال کنید.

بیایید نگاهی به نحوه خشک ماندن در هنگام استفاده از عملکرد trackBy سفارشی بیندازیم.
عبور از trackBy از طریق دایرکتیو

اگر بخواهم بگویم کم‌ارزش‌گرفته‌ترین و نادیده گرفته‌شده‌ترین بخش چارچوب انگولار چیست، قطعاً دستورالعمل‌ها و مکانیسم تزریق وابستگی را می‌گویم. محصور کردن منطق در دستورالعمل ها به شما امکان می دهد به راحتی از کد استفاده مجدد کنید، در حالی که DI ارتباط بین بلوک های ساختمان را امکان پذیر می کند.

بیایید فرض کنیم که اکثر مجموعه‌های برنامه شما دارای یک شناسه منحصربه‌فرد هستند که تحت ویژگی id نگهداری می‌شوند. به منظور ارائه یک تابع سفارشی پیش‌فرض trackBy، می‌توانید توکن تزریق زیر را ایجاد کنید:

در مرحله بعد، می توانید دستورالعملی را که مسئول تنظیم تابع سفارشی trackBy است ایجاد کنید:

توجه داشته باشید که انتخابگر با دستور NgForOf مطابقت دارد، بنابراین نیازی به اضافه کردن ویژگی های اضافی به کد خود برای کارکرد آن ندارید.

اکنون، هر مجموعه ای به جای مقایسه هویت شی، به طور پیش فرض از تابع trackById استفاده می کند.
لغو محلی

اگر می‌خواهید تابع trackBy را برای یک مؤلفه یا بخش خاصی از برنامه خود تغییر دهید، همچنان می‌توانید آن را از طریق یک مؤلفه ارسال کنید (اولویت خواهد داشت) یا یک مقدار جدید برای توکن TRACK_BY_FN با کمک انژکتورهای عنصر ارائه دهید.

بیایید بگوییم که بخش معینی از برنامه شما نیاز به مقایسه موارد بر اساس هویت دارد:

آسفالت های پلمیری و ویژگی های آن(در تب جدید مرورگر باز می شود )

netbasal.com

مثال زنده:

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
}

اگر پست وبلاگ را دوست دارید، لطفاً مرا تشویق کنید 👏