Angular 4 - ท่อ

ในบทนี้เราจะพูดถึงท่อใน Angular 4 คืออะไรก่อนหน้านี้เรียกว่า Pipes ใน Angular1 และเรียกว่าไพพ์ใน Angular 2 และ 4

เดอะ | อักขระใช้ในการแปลงข้อมูล ต่อไปนี้เป็นไวยากรณ์สำหรับสิ่งเดียวกัน

{{ 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!';
}

โค้ดบรรทัดต่อไปนี้จะเข้าสู่ไฟล์ app.component.html ไฟล์.

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

เบราว์เซอร์จะปรากฏดังที่แสดงในภาพหน้าจอต่อไปนี้ -

Angular 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"];
}

เราจะใช้ท่อใน app.component.html ไฟล์.

<!--The content below is only a placeholder and can be replaced.-->
<div style = "width:100%;">
   <div style = "width:40%;float:left;border:solid 1px black;">
      <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.
      
      <h1>Date pipe</h1>
      <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>
   
   <div style = "width:40%;float:left;border:solid 1px black;">
      <h1>Json Pipe</h1>
      <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>
</div>

ภาพหน้าจอต่อไปนี้แสดงเอาต์พุตสำหรับแต่ละท่อ -

จะสร้างท่อแบบกำหนดเองได้อย่างไร?

ในการสร้างไปป์ที่กำหนดเองเราได้สร้างไฟล์ 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);
   }
}

ในการสร้างท่อที่กำหนดเองเราต้องนำเข้า Pipe และ Pipe Transform จาก Angular / core ในคำสั่ง @Pipe เราต้องตั้งชื่อให้กับไพพ์ของเราซึ่งจะใช้ในไฟล์. html ของเรา เนื่องจากเรากำลังสร้างท่อ sqrt เราจึงตั้งชื่อว่า sqrt

เมื่อเราดำเนินการต่อไปเราจะต้องสร้างคลาสและชื่อคลาสคือ SqrtPipe. คลาสนี้จะใช้PipeTransform.

วิธีการแปลงที่กำหนดไว้ในคลาสจะใช้อาร์กิวเมนต์เป็นจำนวนและจะส่งกลับตัวเลขหลังจากการหารากที่สอง

เนื่องจากเราได้สร้างไฟล์ใหม่เราจึงต้องเพิ่มไฟล์ 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 { }

เราได้สร้างไฟล์ app.sqrt.tsชั้นเรียน เราต้องนำเข้าเหมือนกันในapp.module.tsและระบุเส้นทางของไฟล์ นอกจากนี้ยังต้องรวมอยู่ในประกาศดังที่แสดงไว้ด้านบน

ตอนนี้ให้เราดูการโทรไปยังท่อ sqrt ในไฟล์ app.component.html ไฟล์.

<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b>
<br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>

ผลลัพธ์มีลักษณะดังนี้ -