مقالات طراحی سایت

پیش زمینه

در انگولار با کمک pipe میتوانیم دیتا را در تمپلیت HTML تغییر دهیم، بدون اینکه نیاز باشد مقدار دیتا را در فایل TypeScript دستکاری کنیم. به عبارت دیگر، Pipe دیتا را بصورت ورودی میگیرد و آنرا به خروجی مطلوب تغییر میدهد. بهترین مثال برای pipe تغییر فورمت تاریخ است. عموما، فورمت تاریخی که ما از API دریافت میکنیم آن چیزی نیست که میخواهیم به کاربر نمایش دهیم. در این شرایط ما از pipe برای تغییر دیتا به فورمت مطلوب استفاده میکنیم.

Pipeهای از پیش تعریف شده

انگولار pipeهای از پیش تعریف شده برای تغییر دیتا دارد، برای مثال DatePipe، UpperCasePipe، LowerCasePipe و غیره. بیایید چندتا از مثال های DatePipe را بررسی میکنیم.

در کد زیر ما از pipe تاریخ استفاده میکنیم. ما باید pipe را بعد از (|) در تمپلیت قرار دهیم.

Pipe میتواند پارامترهای اختیاری را قبول کند. برای اینکار میتوانید دونقطه و مقدار پارمتر را به انتهای pipe اضافه کنید. در کدهای زیر، ما “shortTime” و “medium” را بعنوان پارامتر pipe تاریخ وارد میکنیم.

 
@Component({
 selector: 'app-pipe-practice',
 template: `
  <div>
    <p>Today is {{currentDate | date}}</</p>
    <p>Or if you prefer, {{currentDate | date:'MM/dd/yyyy'}}</p>
    <p>The time is {{currentDate | date:'shortTime'}}</p>
    <p>Date from time stamp is {{ timeStamp | date:'medium'}}</p>
  </div>
`,
})
export class PipePracticeComponent {
 currentDate: number = Date.now();
 timeStamp: string = '2020-09-25T08:11:19+00:00';
}
 

خروجی بصورت زیر است.

به چه دلیل نیاز است تا ما pipe خودمان را بنویسیم

همه ما میخواهیم تا کاربران بهترین تجربه کاربری را داشته باشند. بطور معمول، اگر مقدار یک متغیر برابر با null باشد، کاربر چیزی نمیبیند. در نتیجه کاربر ما تجربه کاربری خوبی نخواهد داشت. ما این مشکل را با ایجاد pipeی که مقدار null یا undefined را با متن دلخواه در تمپلیت تعویض کند حل خواهیم کرد.

مطالعه بیشتر: تجربه کاربری چیست

ایجاد pipe شخصی

در انگولار CLI برای ایجاد pipe از دستور زیر استفاده میکنیم.

 
ng generate pipe replace-null-with-text
 

انگولار CLI فایلی بصورت زیر ایجاد میکند.

@Pipe({
 name: 'replaceNullWithText'
})
export class ReplaceNullWithTextPipe implements PipeTransform {
transform(value: any, args?: any): any {
 return null;
 }
}

نامی که در دکوراتور @Pipe می آید نام pipe است. ما از این نام در HTML - که مانند مثال pipe تاریخ است - استفاده میکنیم.

در متد transform، مقدار پارامتر همان مقداری است که ما از تمپلیت HTML میگیریم، و args پارمتری اختیاری است که میخواهیم به pipe ارسال کنیم. توجه داشته باشید که شما مجبور نیستید همین نام ها را برای پارامتر خود استفاده کنید اما بخاطر داشته باشید که جای پارامتر مهم است. اولین پارامتر همیشه مقدار را از تمپلیت HTML میگیرد و حداقل یک پارامتر اجباری است.

اگر شما pipe را در ماژولی مثل SharedModule ایجاد میکنید، فراموش نکنید که آنرا باید از ماژول export کنید، در غیر اینصورت نمیتوانید در ماژول های دیگر از آن استفاده کنید.

هدف از نوشتن این pipe این است که ما میخواهیم زمانی که مقدار تمپلیت HTML برابر با null است، متن دلخواه خود را نمایش دهیم. در این مثال ما این متن را بصورت پارامتر از تمپلیت HTML بر میگردانیم.

بنابراین، در کد زیر ما چک میکنیم مقدار تمپلیت HTML برابر با null یا undefined است یا نه. اگر مقدار null یا undefined باشد ما پارمتر replaceText را باز میگردانیم در غیر اینصورت مقدار را تغییر نخواهیم داد و همان را باز خواهیم گرداند.

همچنین ما مقدار پیش فرض “N/A” را برای replaceText قرار میدهیم. بنابراین، اگر ما هیچ پارامتری از تمپلیت HTML پاس ندهیم، مقدار null یا undefuned برابر با “N/A” خواهد بود.

@Pipe({
 name: 'replaceNullWithText'
})
export class ReplaceNullWithTextPipe implements PipeTransform {
transform(value: any, replaceText: string = 'N/A'): any {
 if (value) {
 return value;
 }
return replaceText;
 }
}

بیایید نحوه استفاده از این pipe را بصورت عملی ببینیم.

 
@Component({
 selector: 'app-custom-pipe-practice',
 template: `
  <div>
    <p>Book Name : {{ book | replaceNullWithText:'Book Name Not Available'}}</p>
    <p>Author Name : {{ author | replaceNullWithText: 'Author Name Not Available'}}</p>
    <p>Published at : {{ publishedAt | replaceNullWithText: 'Published Date Not Available'}}</p>
    <p>Price: {{ price | replaceNullWithText }}</p>
  </div>
`,
})
export class CustomPipePracticeComponent {
 book = 'Awesome Book';
 author = null;
 publishedAt = null;
 price = null;
}
 

خروجی بصورت زیر است.

متغیر book برابر با null نیست، بنابراین pipe مقدار را تغییر نخواهد داد. اما مقادیر author و publishedAt برابر با null است، بنابراین pipe مقدار replaceTextی که ما از تریق تمپلیت HTML بعنوان پارامتر برای pipe تعیین کردیم بر میگرداند، و برای قیمت که ما هیچ مقداری تعین نکردیم، مقدار پیش فرض “N/A” برمیگرداند.

به نقل از: medium