Pipes در انگولار ۷ – آموزش انگولار ۷

  • چهارشنبه ۲۳ مرداد ۱۳۹۸
  • بازدید ۱۸۱ نفر

angular7 pipes 6618 تصویر

Pipes در انگولار ۷

در این بخش Pipe ها را بررسی خواهیم کرد. در فریم ورک انگولار ۱ با نام filters ایجاد شده اند و سپس در انگولار ۲ به pipes تغییر یافتند. کاراکتر | در انگولار ۷ برای تبدیل داده ها استفاده می شود. در زیر سینتکس استفاده از آن را مشاهده می کنید:

شما می توانید اعداد، رشته، آرایه و تاریخ را با استفاده از Pipes ها در قالب دلخواه نمایش دهید. برای درک بهتر به مثال هایی که در ادامه گفته می شود، توجه کنید: در مثال زیر ما قصد داریم تا متن را به حروف بزرگ تبدیل کنیم. یک متغیر در فایل app.component.ts تعریف کنید.

مانند نمونه زیر:

و کد زیر را در فایل app.component.html قرار دهید:

خروجی را در تصویر زیر مشاهده می کنید:

angular7 pipes 6618 1 تصویر

در لیست زیر pipe هایی که به صورت پیش فرض در خود انگولار وجود دارند را مشاهده می کنید:

  • Lowercasepipe
  • Uppercasepipe
  • Datepipe
  • Currencypipe
  • Jsonpipe
  • Percentpipe
  • Decimalpipe
  • Slicepipe

ما قبلا از lowercase و uppercase استفاده کرده ایم. در ادامه نحوه استفاده از سایر pipe ها را توضیح می دهیم.

فایل app.component.ts را برای افزودن متغیرهای مورد نیاز به شکل زیر تغییر دهید:

در کد زیر که مربوط به فایل app.component.html است، نحوه استفاده از pipe های مختلف را مشاهده می کنید:

خروجی برنامه:

angular7 pipes 6618 2 تصویر

ایجاد یک pipe سفارشی

به منظور ایجاد pipe سفارشی (در اینجا برای محاسبه sqrt یک عدد) یک فایل جدید با نام app.sqrt.ts ایجاد کنید و محتوای زیر را در آن قرار دهید:

برای ایجاد پایپ سفارشی Pipe و PipTransform را از angular/core وارد کرده و سپس در دستورالعمل @Pipe یک نام برای پایپ سفارشی خود مشخص کنید (این نام در فایل html استفاده می شود).

در ادامه یک کلاس با نام SqrtPipe  که PipeTransform را پیاده سازی می کند را ایجاد کنید.

متد transform تعریف شده در داخل کلاس، یک ورودی از نوع عددی میگیرد و مقدار sqrt آن را باز می گرداند.

توجه! نام فایل، پایپ و کلاس باید متناسب با pipe سفارشی انتخاب شود.

حال چون یک فایل جدید ایجاد کرده ایم، باید آن را به فایل app.module.ts اضافه کنیم:

در مثال زیر نحوه استفاده از پایپ سفارشی را مشاهده می کنید:

خروجی:

angular7 pipes 6618 3 تصویر

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است