راهنمای جامع لوله ها در Angular

با کمک لوله های Angular، تبدیل داده ها را در برنامه های Angular آسان تر کنید.

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

لوله ها در انگولار چیست؟

لوله های زاویه ای ترانسفورماتورهای داده ای هستند که برنامه شما را پویاتر می کنند. آنها یک مقدار را به عنوان ورودی می گیرند و یک مقدار تبدیل شده را به عنوان خروجی برمی گردانند. تغییر شکل داده ها می تواند به سادگی قالب بندی یک تاریخ یا واحد پول یا به پیچیدگی فیلتر کردن یا مرتب کردن لیستی از موارد باشد.

می توانید از لوله ها در اجزای Angular و قالب های خود استفاده کنید. استفاده از لوله‌ها آسان است و می‌توانید آن‌ها را به زنجیر بزنید تا تغییرات پیچیده‌تری ایجاد کنید.

Angular چندین لوله داخلی از جمله DatePipe، UpperCasePipe، LowerCasePipe، CurrencyPipe، DecimalPipe، PercentPipe، JsonPipe، SlicePipe و AsyncPipe را ارائه می دهد. همچنین قابلیت ایجاد لوله های سفارشی را فراهم می کند.

هر لوله Angular داخلی عملکرد منحصر به فردی را انجام می دهد و می تواند به شما در تبدیل داده ها کمک کند.

DatePipe

DatePipe متغیرهای تاریخ و زمان شما را با در نظر گرفتن منطقه شما در قالب مشخصی قالب بندی و نمایش می دهد. برخلاف سایر فریم ورک ها که برای قالب بندی تاریخ و زمان به بسته های جاوا اسکریپت نیاز دارند، Angular از DatePipe استفاده می کند. برای استفاده از DatePipe در برنامه خود، نماد لوله (|) و سپس تاریخ و هر پارامتر اضافی را اضافه کنید.

مثلا:

<p>Today's date is {{ currentDate | date }}</p>

در این مثال، شما متغیر currentDate را از DatePipe عبور می‌دهید، که سپس آن را بر اساس فرمت پیش‌فرض تاریخ قالب‌بندی می‌کند. شما متغیر currentDate را در فایل TypeScript جزء خود تعریف می کنید.

به عنوان مثال:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  currentDate: any = new Date();
}

همچنین می توانید پارامترهای اضافی را به DatePipe ارسال کنید تا خروجی را سفارشی کنید:

<p>Today's date is {{ currentDate | date:'shortDate' }}</p>

بلوک کد بالا پارامتر shortDate را به DatePipe ارسال کرد. این به DatePipe می گوید که تاریخ را با استفاده از قالب تاریخ کوتاه فرمت کند. در کنار پارامتر shortDate، می‌توانید DatePipe را با استفاده از پارامترهای مختلف، از جمله z، longDate و فرمت‌های تاریخ سفارشی مانند dd/MM/YY پیکربندی کنید.

UpperCasePipe و LowerCasePipe

UpperCasePipe و LowerCasePipe متن های شما را تغییر می دهند. شما با استفاده از UpperCasePipe متون خود را به حروف بزرگ و با استفاده از LowerCasePipe به حروف کوچک تبدیل می کنید.

برای استفاده از UpperCasePipe و LowerCasePipe، نماد لوله (|) و به دنبال آن حروف کوچک برای استفاده از LowerCasePipe یا حروف بزرگ برای استفاده از UpperCasePipe اضافه کنید.

در زیر مثالی از نحوه استفاده از UpperCasePipe و LowerCasePipe آورده شده است:

<p>{{ message | uppercase}}</p>
<p>{{ message | lowercase}}</p>

Currency Pipe

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

مثلا:

<p>{{ number | currency }}</p>

در این مثال، CurrencyPipe متغیر عدد را به ارز تبدیل می کند. به طور پیش فرض، CurrencyPipe متغیرها را به دلار تبدیل می کند. برای تغییر این، می توانید CurrencyPipe را برای تبدیل به ارزهای دیگر با عبور پارامترهای اضافی پیکربندی کنید.

به عنوان مثال:

<p>{{ number | currency: 'GBP' }}</p>

در اینجا، پارامتر GBP را به CurrencyPipe منتقل می کنید. این تضمین می کند که متغیر عدد به ارز پوند بریتانیا تبدیل می شود.

DecimalPipe و PercentPipe

DecimalPipe اعداد شما را به اعشار تبدیل می کند، در حالی که PercentPipe اعداد شما را به درصد تبدیل می کند.

برای استفاده از DecimalPipe، از نماد لوله و به دنبال آن عدد و پارامترهای اضافی استفاده کنید. برای استفاده از PercentPipe، همین کار را انجام دهید اما عدد را با درصد بدون هیچ پارامتر اضافی جایگزین کنید.

مثلا:

<p>{{ number | number: '1.2-3' }}</p>
<p>{{ number | percent }}</p>

پارامترهای اضافی ارسال شده به DecimalPipe تعداد اعداد صحیح و کسری نمایش داده شده را کنترل می کنند. پارامتر 1 مشخص می کند که حداقل باید یک رقم صحیح وجود داشته باشد. در مقایسه، پارامتر 2.3 مشخص می کند که باید حداقل دو و حداکثر سه رقم کسری وجود داشته باشد.

جیسون پایپ

JsonPipe یک لوله داخلی است که داده ها را به فرمت رشته ای JSON تبدیل می کند. عمدتاً برای اهداف اشکال زدایی استفاده می شود. شما می توانید از JsonPipe هم روی اشیاء و هم در آرایه ها استفاده کنید.

سینتکس استفاده از JsonPipe به شرح زیر است:

{{ expression | json }}

در اینجا، عبارت داده‌ای است که می‌خواهید به فرمت JSON تبدیل کنید. عملگر لوله (|) JsonPipe را به عبارت اعمال می کند.

به عنوان مثال، یک شی و یک آرایه در کامپوننت خود تعریف کنید:

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})

export class AppComponent {
  user: data = {
    firstname: "John",
    lastname: "Doe",
  };

  profiles: data[] = [
    {
      firstname: "John",
      lastname: "Doe",
    },
    {
      firstname: "Peter",
      lastname: "Parker",
    },
  ];
}

interface data {
  firstname: string;
  lastname: string;
}

بلوک کد بالا یک شی کاربر و یک آرایه پروفایل را تعریف می کند. اکنون می توانید از JsonPipe برای تبدیل شی و آرایه به JSON استفاده کنید.

<p>{{ user | json}}</p>
<p>{{ profiles | json}}</p>

در اینجا، JsonPipe شی کاربر و آرایه پروفایل ها را به یک رشته JSON تبدیل می کند، که می توانید به سرعت در قالب های خود در طول توسعه یا اشکال زدایی بررسی کنید.

SlicePipe

SlicePipe بسیار شبیه به متد slice() جاوا اسکریپت است. SlicePipe آرایه ها یا رشته ها را با استخراج عناصر آنها برای ایجاد آرایه ها یا رشته های جدید قالب بندی می کند.

برای استفاده از SlicePipe از نماد لوله و به دنبال آن slice و دو پارامتر شروع و پایان استفاده می کنید. شاخص شروع، موقعیتی در آرایه یا رشته است که لوله شروع به استخراج عناصر می کند، و شاخص پایان جایی است که لوله استخراج عناصر را متوقف می کند.

در اینجا مثالی از نحوه استفاده از SlicePipe آورده شده است:

<p>{{ string | slice: 0:2}}</p>
<p>{{ array | slice: 0:1}}</p>

در این مثال، SlicePipe دو عنصر اول را از متغیر رشته، عنصر در شاخص 0 و عنصر در شاخص 1 را استخراج می کند. به علاوه، اولین عنصر را از متغیر آرایه استخراج می کند. SlicePipe زمانی مفید است که می خواهید تنها بخشی از داده ها را در قالب نمایش دهید.

AsyncPipe

AsyncPipe یک لوله Angular داخلی است که به طور خودکار در یک Observable یا Promise اشتراک و لغو اشتراک می کند. آخرین مقدار منتشر شده توسط Observable یا Promise را برمی گرداند.

سینتکس استفاده از AsyncPipe به شرح زیر است:

{{ expression | async }}

در اینجا، عبارت Observable یا Promise است که می خواهید در آن مشترک شوید.

مثلا:

let numbers = of(1, 2, 3, 4, 5);

می‌توانید از AsyncPipe برای اشتراک در این Observable استفاده کنید و آخرین مقدار منتشر شده را به صورت زیر نمایش دهید:

<p>{{ numbers | async }}</p>

این بلوک کد آخرین عدد منتشر شده توسط Observable را خروجی می دهد. AsyncPipe هنگام مدیریت عملیات ناهمزمان در قالب های شما بسیار مفید است. هنگامی که کامپوننت مقداردهی اولیه می‌شود، به‌طور خودکار مشترک Observable یا Promise می‌شود و زمانی که از بین می‌رود، اشتراک را لغو می‌کند.

زنجیرزنی لوله ها در انگولار

می‌توانید لوله‌ها را به هم زنجیر کنید تا چندین تبدیل را در یک عبارت واحد انجام دهید. زنجیر کردن لوله ها به سادگی استفاده از چندین عملگر لوله (|) در یک عبارت واحد است. خروجی هر لوله به ورودی لوله بعدی تبدیل می شود.

در اینجا نحو اصلی آمده است:

<p>{{ expression | pipe1 | pipe2 | ... }}</p>

به عنوان مثال، می توانید یک شی تاریخ را با استفاده از DatePipe به رشته تبدیل کنید و سپس با استفاده از UpperCasePipe آن رشته را به حروف بزرگ تبدیل کنید.

<p>Today's date is {{ currentDate | date:'shortDate' | uppercase }}</p>

ایجاد برنامه های پویا با استفاده از لوله ها

Pipes یک ویژگی قدرتمند در Angular است که به شما امکان می دهد داده ها را قبل از نمایش در نمای تغییر دهید. در اینجا، با انواع لوله های داخلی پیشنهادات Angular، مانند DatePipe، CurrencyPipe، UpperCasePipe و غیره آشنا شدید. همچنین یاد گرفتید که چگونه از آنها در برنامه خود برای ایجاد محتوای پویاتر استفاده کنید. با استفاده از لوله ها، توسعه دهندگان می توانند برنامه های کاربردی وب انعطاف پذیرتر و پویاتر را با کد کمتر ایجاد کنند.

منبع مقاله