آموزش Pipe سفارشی در انگولار ۲

3 سال پیش

آموزش Pipe سفارشی در انگولار ۲

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش Pipe سفارشی در انگولار ۲ خواهیم پرداخت.

انگولار ۲ همچنین امکان ایجاد Pipe سفارشی را دارد. روش کلی برای تعریف Pipe سفارشی به شرح زیر است.

import { Pipe, PipeTransform } from '@angular/core';  
@Pipe({name: 'Pipename'}) 

export class Pipeclass implements PipeTransform { 
   transform(parameters): returntype { } 
}

“Pipename” – این نام Pipe است.

Pipeclass – این نام کلاس اختصاص داده شده به Pipe سفارشی است.

Transform – این تابع کار با Pipe است.

Parameters – این پارامترهایی هستند که به Pipe منتقل می شوند.

Returntype – این نوع برگشت Pipe است.

بیایید یک Pipe سفارشی ایجاد کنیم که ۲ عدد را ضرب می کند. سپس از آن Pipe در کلاس جزء خود استفاده خواهیم کرد.

مرحله ۱ – ابتدا فایلی به نام multiplier.pipe.ts ایجاد کنید.

Multiplier
مرحله ۲ – کد زیر را در فایل ایجاد شده بالا قرار دهید.

import { 
   Pipe, 
   PipeTransform 
} from '@angular/core';  

@Pipe ({ 
   name: 'Multiplier' 
}) 

export class MultiplierPipe implements PipeTransform { 
   transform(value: number, multiply: string): number { 
      let mul = parseFloat(multiply); 
      return mul * value 
   } 
}

نکات زیر باید در مورد کد بالا ذکر شود.

ما ابتدا ماژول های Pipe و PipeTransform را وارد می کنیم.
سپس، ما یک Pipe با نام “Multiplier” ایجاد می کنیم.
ایجاد کلاسی به نام MultiplierPipe که ماژول PipeTransform را پیاده سازی می کند.
سپس تابع تبدیل مقدار و پارامتر چندگانه را گرفته و ضرب هر دو عدد را خروجی می دهد.

مرحله ۳ – در فایل app.component.ts کد زیر را قرار دهید.

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

@Component ({ 
   selector: 'my-app', 
   template: '<p>Multiplier: {{2 | Multiplier: 10}}</p>' 
}) 
export class AppComponent {  }

توجه – در قالب خود، از Pipe سفارشی جدید خود استفاده می کنیم.

مرحله ۴ – مطمئن شوید که کد زیر در فایل app.module.ts قرار داده شده است.

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

import {
   BrowserModule
} from '@angular/platform-browser';

import {
   AppComponent
} from './app.component';

import {
   MultiplierPipe
} from './multiplier.pipe'

@NgModule ({
   imports: [BrowserModule],
   declarations: [AppComponent, MultiplierPipe],
   bootstrap: [AppComponent]
})

export class AppModule {}

موارد زیر باید در مورد کد بالا ذکر شود.

ما باید اطمینان حاصل کنیم که ماژول MultiplierPipe خود را شامل می شود.

ما همچنین باید اطمینان حاصل کنیم که در بخش اظهارنامه گنجانده شده است.

هنگامی که همه تغییرات کد را ذخیره کرده و مرورگر را تازه کردید، خروجی زیر را دریافت خواهید کرد.

Multiplier Output

منبع.

لیست جلسات قبل آموزش آنگولار ۲

برچسب ها : آموزش انگولار 2 آموزش طراحی وب سایت

نویسنده مطلب erfan molaei

آموزش Pipe سفارشی در انگولار ۲

آموزش Pipe سفارشی در انگولار ۲

لیست جلسات قبل آموزش آنگولار ۲

دیدگاه شما

بدون دیدگاه

آموزش Pipe سفارشی در انگولار ۲

لیست جلسات قبل آموزش آنگولار ۲

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه