آشنایی با Pipe در انگولار — راهنمای مقدماتی

۵۱۱ بازدید

آخرین به‌روزرسانی: ۱۱ شهریور ۱۴۰۲

زمان مطالعه: ۶ دقیقه

آشنایی با Pipe در انگولار — راهنمای مقدماتی

pipe روشی برای نوشتن تبدیل‌های مقدار نمایشی است که می‌توان در HTML اعلان کرد. Pipe داده‌ها را به عنوان ورودی می‌گیرد و آن را به یک خروجی مطلوب تبدیل می‌کند. در این مقاله به توضیح pipe در انگولار می‌پردازیم.

فهرست مطالب این نوشته

Pipe-های داخلی

Pipe-های سفارشی

مثال‌هایی از pipe سفارشی

تعریف pipe-های انگولار کاملاً سرراست است و می‌تواند کاملاً مفید نیز باشد. انگولار برخی pipe-های داخلی مفید دارد که آماده استفاده هستند و به ما امکان می‌دهند pipe-های سفارشی خود را بسازیم. در ادامه این مقاله با طرز انجام این کار آشنا می‌شویم.

Pipe-های داخلی

همان طور که اشاره کردیم انگولار برخی pipe-های داخلی دارد که آماده استفاده در هر قالبی هستند. در این بخش قصد داریم برخی از مفیدترین آن‌ها را بررسی کنیم و با روش استفاده از آن‌ها آشنا شویم. ما در این بخش انتظار داریم نه تنها از آن‌ها در اپلیکیشن‌های انگولار بهره بگیریم، بلکه با طرز کار آن‌ها نیز می‌خواهیم آشنا شویم.

فیلم آموزش فریم ورک انگولار جی اس – ساخت اپلیکیشن با AngularJS در فرادرس

کلیک کنید

DatePipe

این pipe یک مقدار تاریخ را به صورت یک رشته قالب‌بندی می‌کند. این قالب‌بندی بر مبنای پارامترهای ارائه شده انجام می‌یابد:

1const value = new Date('2019-03-01');
2<p>Birthdate: {{ value | date : 'dd/MM/YYYY' }}</p>
3<!-- output '01/03/2019' -->

ورودی: یک شیء داده، عدد (میلی‌ثانیه‌های سپری‌شده از UTC epoch) یا یک رشته ISO است.
پارامتر: قالب تاریخ

برای مشاهده همه قالب‌بندی‌های موجود به این صفحه (+) مراجعه کنید.

PercentagePipe

این pipe یک مقدار عددی را به یک رشته درصد تبدیل می‌کند که بر اساس پارامترهای ارائه شده قالب‌بندی می‌شود:

1const value = 23.1;
2<p>Percentage: {{ value | percent : '3.2-2' }}</p>
3<!-- output '023,10%' -->

ورودی: یک عدد
پارامترها:
- minIntegerDigits – کمینه تعداد ارقام صحیح پیش از ممیز اعشار. مقدار پیش‌فرض 1 است.
- minFractionDigits – کمینه تعداد ارقام پس از ممیز اعشار. مقدار پیش‌فرض 0 است.
- maxFractionDigits – بیشینه تعداد ارقام پس از ممیز اعشار. مقدار پیش‌فرض 0 است.

SlicePipe

این pipe یک رشته را به زیررشته‌ای از آن تبدیل می‌کند یا یک آرایه را به زیرمجموعه آن تبدیل می‌کند.

1const value = 'Leonardo';
2<p>Nickname: {{ value | slice : 0 : 2 }}</p>
3<!-- output 'Leo' -->
4--------------------------------------------------
5const values = ['Red', 'Blue', 'Green', 'Purple'];
6<p>Colors:</p>
7<ul>
8  <li *ngFor="let value of values| slice : 1 : 3" >
9    {{ value }}
10  </li>
11</ul>
12<!-- output 
13  <ul>
14    <li>Blue</li>
15    <li>Green</li>
16  </ul>
17-->

ورودی: یک آرایه یا رشته.
پارامترها:
- Startnumber – اندیس آغازین زیرمجموعه بازگشتی.
- Endnumber – انتهای زیرمجموعه بازگشتی.

حالت‌های Lowercase و Uppercase

این pipe-ها یک رشته را به حالت همه حروف کوچک یا بزرگ تبدیل می‌کنند:

1const value = 'Leonardo';
2<p>In Lowercase: {{ value | lowercase }}</p>
3<!-- output 'leonardo' -->
4<p>In Uppercase: {{ value | uppercase }}</p>
5<!-- output 'LEONARDO' -->

ورودی: یک رشته

Pipe-های سفارشی

برخی اوقات به تبدیل خاصی نیاز داریم که pipe-های پیش‌فرض انگولار به آن منظور پاسخگو نیستند. در این حالت باید از pipe-های سفارشی انگولار استفاده کنیم که به ما امکان می‌دهند تا pipe-های سفارشی خودمان را بسازیم و برای آن‌ها ورودی، تابع تبدیل و خروجی تعریف کنیم.

فیلم آموزش ارتباطات پروتکل وب سوکت با نود جی اس و انگولار – WebSocket با Node.js و Angular در فرادرس

کلیک کنید

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

ابتدا باید pipe خود را بسازیم. این pipe بسیار ساده است و صرفاً برای مقاصد آموزشی استفاده می‌شود. در این pipe یک پارامتر رشته ارائه می‌کنیم که به عبارت Hello الحاق می‌شود. روش کار به صورت زیر است:

1import { Pipe, PipeTransform } from '@angular/core';
2@Pipe({
3  name: 'sayHello'
4})
5export class GreetingsPipe implements PipeTransform {
6  public transform(name: string): string {
7    return 'Hello, ' + name;
8  }
9}

پارامتر Name که در دکوراتور Pipe@ تعیین می‌شود، همان نام pipe است که در HTML مانند date ،lowercase ،uppercase و pipe-های دیگر که بررسی کردیم مورد استفاده قرار می‌گیرد.

تابع تبدیل جایی که کار اصلی پایپ انجام می‌شود و در آن تبدیل مطلوب روی ورودی دریافتی را تعریف می‌کنیم. در مثال فوق یک پارامتر ورودی که رشته‌ ما است را دریافت می‌کنیم. این آن مقداری است که تابع تبدیل روی آن عمل خواهد کرد. پارامتر نخست در تابع تبدیل همواره مقداری است که با آن کار می‌کنیم.

با این حال می‌توانیم پارامترهای دیگری نیز بسته به نیاز دریافت کنیم. سپس آن‌ها را در HTML عرضه می‌کنیم و می‌توانیم از آن‌ها در تابع تبدیل استفاده کنیم. در نهایت تابع تبدیل یک رشته بازگشت می‌دهد که خروجی pipe ما خواهد بود.

ثبت یک pipe سفارشی

در این بخش برای استفاده از pipe خود باید آن را ثبت کنیم. برای ثبت یک پایپ تنها کاری که باید انجام دهیم، افزودن کلاس آن به بخش declarations ماژول است. در این جا یک ماژول برای pipe ایجاد و آن را اکسپورت می‌کنیم تا در ماژول‌های دیگر نیز استفاده شود.

1import { NgModule } from '@angular/core';
2import { GreetingsPipe } from './greetings.pipe';
3@NgModule({
4   declarations: [
5     GreetingsPipe
6   ],
7   exports: [
8     GreetingsPipe
9   ]
10})
11export class GreetingsPipeModule { }

استفاده از pipe سفارشی

زمانی که pipe ایجاد و در یک ماژول ثبت شد، می‌توانیم آن ماژول را در محل مورد نیاز ایمپورت کنیم تا از pipe استفاده کنیم.

فرض کنید یک شیء User در کامپوننت خود داریم که دارای مشخصه firstName است که یک رشته به عنوان نام کاربر است. در این حالت می‌توانیم آن را به پاراگراف HTML خود اضافه کنیم تا به صورت زیر به کاربر خود خوشامدگویی کنیم:

1this.user = {
2  firstName: 'Leonardo',
3  ...
4};
5--------------------------------------------------
6<div>
7  <p>You are now logged in our application!</p>
8  <p>{{ user.firstName | sayHello }}</p>
9</div>
10<!-- output
11  <p>Hello, Leonardo</p>
12-->

مثال‌هایی از pipe سفارشی

اکنون می‌خواهیم برخی مثال‌های واقعی‌تر از pipe-ها را بررسی کنیم که می‌توان در اپلیکیشن‌های واقعی مورد استفاده قرار دارد.

فیلم آموزش فریم ورک انگولار جی اس – ساخت اپلیکیشن با AngularJS در فرادرس

کلیک کنید

Pipe پول

ابتدا باید اشاره کنیم که انگولار دارای یک CurrencyPipe است که می‌توان از آن استفاده کرد. با این حال اگر به مقداری قالب‌بندی خاص برای خود نیاز دارید می‌توانید برای خودتان یک pipe سفارشی بسازید. فرض کنید تبدیلی مانند 105.5 > R$ 105,50 می‌خواهیم:

1import { Pipe, PipeTransform } from '@angular/core';
2@Pipe({
3  name: 'currencyFormat'
4})export class CurrencyFormat implements PipeTransform {
5  public transform(
6    value: number,
7    currencySign: string = 'R$ ',
8    chunkDelimiter: string = '.',
9    decimalDelimiter: string = ','
10  ): string {
11    if (!value)
12      return currencySign + '0' + decimalDelimiter + '00';
13    const changedValue = this.addCommas(value.toFixed(2));
14    const formatted = changedValue.toString().replace(
15      /[,.]/g, function (val) {
16        return val === ',' ? chunkDelimiter : decimalDelimiter;
17      }
18    );
19    return currencySign + formatted;
20  }
21  private addCommas(nStr) {
22    nStr += '';
23    const x = nStr.split('.');
24    let x1 = x[0];
25    const x2 = x.length > 1 ? '.' + x[1] : '';
26    const rgx = /(\d+)(\d{3})/;
27    while (rgx.test(x1)) {
28        x1 = x1.replace(rgx, '$1' + ',' + '$2');
29    }
30    return x1 + x2;
31  }
32}

همچنان که پیشتر اشاره کردیم می‌توان به هر تعداد که لازم است پارامترهای ورودی دریافت کرد. در این پایپ نخستین پارامتر مقداری است که می‌خواهیم آن را قالب‌بندی کنیم. با این حال، در این پایپ رشته currencySign، رشته chunkDelimiter و رشته decimalDelimiter را نیز دریافت می‌کنیم. بنابراین می‌توانیم از آن‌ها در تابع تبدیل خود استفاده کنیم. طرز کار پایپ به صورت زیر است:

1{{ 9999.9 | currencyFormat : 'R$' : '.' : ',' }}
2<!-- output: R$ 9.999.90 -->

Pipe قالب‌بندی سند

در کشور برزیل هر فرد یک سند شناسایی به نام CPF دارد که این سند دارای یک شماره منحصر به فرد با قالب‌بندی خاص است. برخی اوقات باید یک رشته خام را دریافت کرده و سندی با قالب‌بندی صحیح بازگشت دهیم. در این حالت برای مثال تبدیلی مانند 11111111111 -> 111.111.111–11 اجرا می‌شود:

1import { Pipe, PipeTransform } from '@angular/core';
2@Pipe({
3  name: 'cpfFormat'
4})
5export class CpfFormat implements PipeTransform {
6  public transform(cpf: string): string {
7    if (!cpf || cpf.trim() === '') { return ''; }
8    let formatted: string;
9    formatted = cpf.substring(0, 3) + '.';
10    formatted = formatted + cpf.substring(3, 6) + '.';
11    formatted = formatted + cpf.substring(6, 9) + '-';
12    formatted = formatted + cpf.substring(9, 11);
13    return formatted;
14  }
15}

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

{{ '99999999999' | cpfFormat }}
<!-- output: 999.999.999-99 -->

تست کردن pipe

ایجاد تست‌های unit برای Pipe-های سفارشی کاری کاملاً ساده است، چون تابع‌های خالص محسوب می‌شوند. تابع‌های خالص یک ورودی دریافت کرده و خروجی مطلوب را ارائه می‌کنند. در ادامه مثالی از ایجاد یک تست ساده برای pipe قبلی CPF را ملاحظه می‌کنید:

1import { CpfFormat } from './cpf.pipe';
2describe('[Pipe] CPF Format', () => { 
3  let pipe: CpfFormat;
4  beforeEach(() => {
5    pipe = new CpfFormat();
6  }); 
7  it('should return a valid \'cpf\' formatted correctly', () => {
8    expect(pipe.transform('32726532950')).toBe('327.265.329-50');
9  });
10  it('should return empty for a null \'cpf\'', () => {
11    expect(pipe.transform(null)).toBe('');
12    expect(pipe.transform('')).toBe('');
13  });
14});

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

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

بر اساس رای ۲ نفر

آیا این مطلب برای شما مفید بود؟

اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.

ثبت نظر

منابع:

itnext

میثم لطفی (+)

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