آموزش پایپ ها در انگولار 4

saber

3 سال پیش

امتیاز دهید post

آموزش پایپ ها در انگولار 4

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

پایپ ها قبلاً در انگولار 1 فیلتر نامیده می شدند و در انگولار 2 و 4 پایپ نامیده می شدند.

کاراکتر | برای تبدیل داده ها استفاده می شود. در زیر نحو برای همان است

{{ Welcome to Angular 4 | lowercase}}

1	{{ Welcome to Angular 4 \| lowercase}}

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

اجازه دهید چند نمونه از پایپها را در نظر بگیریم.

در اینجا ، ما می خواهیم متن داده شده به حروف بزرگ را نمایش دهیم. این را می توان با استفاده از پایپ های زیر انجام داد –

در فایل app.component.ts ، متغیر عنوان را تعریف کرده ایم –

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
}

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'Angular 4 Project!';

}

خط کد زیر وارد فایل app.component.html می شود.

&lt;b&gt;{{title | uppercase}}&lt;/b&gt;&lt;br/&gt;
&lt;b&gt;{{title | lowercase}}&lt;/b&gt;

1 2	<b>{{title \| uppercase}}</b><br/> <b>{{title \| lowercase}}</b>

مرورگر مطابق تصویر زیر ظاهر می شود –

Uppercase Lowercase

انگولار 4 پایپ های داخلی را ارائه می دهد. پایپ ها در زیر ذکر شده است –

Lowercasepipe
Uppercasepipe
Datepipe
Currencypipe
Jsonpipe
Percentpipe
Decimalpipe
Slicepipe

ما قبلاً پایپ های کوچک و بزرگ را دیده ایم. حالا ببینیم پایپ های دیگر چگونه کار می کنند.

خط کد زیر به ما کمک می کند تا متغیرهای مورد نیاز را در فایل app.component.ts تعریف کنیم –

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

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

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate = new Date();
   jsonval = {name:'Rox', age:'25', address:{a1:'Mumbai', a2:'Karnataka'}};
   months = ["Jan", "Feb", "Mar", "April", "May", "Jun",
             "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
}

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'Angular 4 Project!';

todaydate = new Date();

jsonval = {name:'Rox', age:'25', address:{a1:'Mumbai', a2:'Karnataka'}};

months = ["Jan", "Feb", "Mar", "April", "May", "Jun",

"July", "Aug", "Sept", "Oct", "Nov", "Dec"];

}

ما از پایپ ها در فایل app.component.html استفاده خواهیم کرد.

&lt;!--The content below is only a placeholder and can be replaced.--&gt;
&lt;div style = "width:100%;"&gt;
   &lt;div style = "width:40%;float:left;border:solid 1px black;"&gt;
      &lt;h1&gt;Uppercase Pipe&lt;/h1&gt;
      &lt;b&gt;{{title | uppercase}}&lt;/b&gt;&lt;br/&gt;
      
      &lt;h1&gt;Lowercase Pipe&lt;/h1&gt;
      &lt;b&gt;{{title | lowercase}}&lt;/b&gt;
      
      &lt;h1&gt;Currency Pipe&lt;/h1&gt;
      &lt;b&gt;{{6589.23 | currency:"USD"}}&lt;/b&gt;&lt;br/&gt;
      &lt;b&gt;{{6589.23 | currency:"USD":true}}&lt;/b&gt; //Boolean true is used to get the sign of the currency.
      
      &lt;h1&gt;Date pipe&lt;/h1&gt;
      &lt;b&gt;{{todaydate | date:'d/M/y'}}&lt;/b&gt;&lt;br/&gt;
      &lt;b&gt;{{todaydate | date:'shortTime'}}&lt;/b&gt;
      
      &lt;h1&gt;Decimal Pipe&lt;/h1&gt;
      &lt;b&gt;{{ 454.78787814 | number: '3.4-4' }}&lt;/b&gt; // 3 is for main integer, 4 -4 are for integers to be displayed.
   &lt;/div&gt;
   
   &lt;div style = "width:40%;float:left;border:solid 1px black;"&gt;
      &lt;h1&gt;Json Pipe&lt;/h1&gt;
      &lt;b&gt;{{ jsonval | json }}&lt;/b&gt;
      &lt;h1&gt;Percent Pipe&lt;/h1&gt;
      &lt;b&gt;{{00.54565 | percent}}&lt;/b&gt;
      &lt;h1&gt;Slice Pipe&lt;/h1&gt;
      &lt;b&gt;{{months | slice:2:6}}&lt;/b&gt; 
      // here 2 and 6 refers to the start and the end index
   &lt;/div&gt;
&lt;/div&gt;

<h1>Uppercase Pipe</h1>

<b>{{title | uppercase}}</b><br/>

<h1>Lowercase Pipe</h1>

<b>{{title | lowercase}}</b>

<h1>Currency Pipe</h1>

<b>{{6589.23 | currency:"USD"}}</b><br/>

<b>{{6589.23 | currency:"USD":true}}</b> //Boolean true is used to get the sign of the currency.

<b>{{todaydate | date:'d/M/y'}}</b><br/>

<b>{{todaydate | date:'shortTime'}}</b>

<h1>Decimal Pipe</h1>

<b>{{ 454.78787814 | number: '3.4-4' }}</b> // 3 is for main integer, 4 -4 are for integers to be displayed.

</div>

<b>{{ jsonval | json }}</b>

<h1>Percent Pipe</h1>

<b>{{00.54565 | percent}}</b>

<h1>Slice Pipe</h1>

<b>{{months | slice:2:6}}</b>

// here 2 and 6 refers to the start and the end index

</div>

تصاویر زیر خروجی هر لوله را نشان می دهد –

Output For Each Pipe

Output For Each Pipe-2

چگونه یک پایپ سفارشی ایجاد کنیم؟

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

app.sqrt.ts

import {Pipe, PipeTransform} from '@angular/core';
@Pipe ({
   name : 'sqrt'
})
export class SqrtPipe implements PipeTransform {
   transform(val : number) : number {
      return Math.sqrt(val);
   }
}

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

@Pipe ({

name : 'sqrt'

})

export class SqrtPipe implements PipeTransform {

transform(val : number) : number {

return Math.sqrt(val);

}

برای ایجاد یک پایپ سفارشی ، باید Pipe and Pipe Transform را از Angular/core وارد کنیم. در دستور Pipe ما باید نام لوله خود را بگذاریم ، که در فایل .html ما استفاده خواهد شد. از آنجا که ما پایپ sqrt را ایجاد می کنیم ، نام آن را sqrt می گذاریم.

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

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

از آنجا که ما یک فایل جدید ایجاد کرده ایم ، باید همان را در app.module.ts اضافه کنیم. این کار به صورت زیر انجام می شود –

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],

   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

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

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

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

import { NewCmpComponent } from './new-cmp/new-cmp.component';

import { ChangeTextDirective } from './change-text.directive';

import { SqrtPipe } from './app.sqrt';

@NgModule({

declarations: [

SqrtPipe,

AppComponent,

NewCmpComponent,

ChangeTextDirective

imports: [

BrowserModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

ما کلاس app.sqrt.ts را ایجاد کرده ایم. ما باید همان را در app.module.ts وارد کنیم و مسیر فایل را مشخص کنیم. همچنین باید در اظهارنامه ها همانطور که در بالا نشان داده شده است گنجانده شود.

&lt;h1&gt;Custom Pipe&lt;/h1&gt;
&lt;b&gt;Square root of 25 is: {{25 | sqrt}}&lt;/b&gt;
&lt;br/&gt;
&lt;b&gt;Square root of 729 is: {{729 | sqrt}}&lt;/b&gt;

<h1>Custom Pipe</h1>

<b>Square root of 25 is: {{25 | sqrt}}</b>

<br/>

<b>Square root of 729 is: {{729 | sqrt}}</b>

Custome Pipe

منبع.

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

امتیاز دهید post

برچسب ها : آموزش انگولار 4

نویسنده مطلب saber

آموزش پایپ ها در انگولار 4

آموزش پایپ ها در انگولار 4

app.component.ts

چگونه یک پایپ سفارشی ایجاد کنیم؟

app.sqrt.ts

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

دیدگاه شما

بدون دیدگاه

آموزش پایپ ها در انگولار 4

app.component.ts

چگونه یک پایپ سفارشی ایجاد کنیم؟

app.sqrt.ts

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

دیدگاه شما

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

بدون دیدگاه