วิธีสร้างไปป์แบบกำหนดเองในเชิงมุม

Pipes เป็นฟีเจอร์ Angular อันทรงพลังที่ให้คุณแปลงและจัดรูปแบบข้อมูลในแอปพลิเคชันของคุณ สิ่งเหล่านี้มอบวิธีที่สะดวกในการจัดการข้อมูลก่อนที่จะแสดงต่อผู้ใช้ ทำให้แอปพลิเคชันของคุณเป็นแบบไดนามิกและเป็นมิตรต่อผู้ใช้มากขึ้น

Angular จัดเตรียมอาร์เรย์ของไปป์ที่กำหนดไว้ล่วงหน้าที่เรียกว่า"ไปป์ในตัว"ซึ่งรวมถึง DatePipe, CurrencyPipe และ UpperCasePipe นอกจากนี้ นักพัฒนายังมีความยืดหยุ่นในการออกแบบไปป์ที่ออกแบบเฉพาะของตนเอง ซึ่งช่วยให้พวกเขาสามารถจัดการข้อมูลตามความต้องการเฉพาะได้

ตั้งค่าโครงการเชิงมุมของคุณ

เพื่อสร้างไปป์ส่วนบุคคลอย่างมีประสิทธิภาพภายในเฟรมเวิร์ก Angular ความเข้าใจที่ครอบคลุมเกี่ยวกับกลไกการวางท่อถือเป็นสิ่งจำเป็น ก่อนที่จะดำเนินการต่อ ตรวจสอบให้แน่ใจว่าคุณคุ้นเคยกับการใช้งานไปป์ใน Angular ข้อกำหนดเบื้องต้นสำหรับการตั้งค่าโปรเจ็กต์ Angular เกี่ยวข้องกับการติดตั้ง Angular Command Line Interface (CLI) บนระบบของคุณ ซึ่งสามารถทำได้โดยใช้ Node Package Manager (npm)

ในการติดตั้ง Angular Command Line Interface (CLI) ให้ดำเนินการตามคำสั่งต่อไปนี้:

 npm install -g @angular/cli

หากต้องการเริ่มต้นโปรเจ็กต์ Angular โดยใช้เวอร์ชันเฉพาะของเฟรมเวิร์กและตั้งค่าสภาพแวดล้อมสำหรับการพัฒนา ให้ดำเนินการขั้นตอนต่อไปนี้ในเทอร์มินัลหรือพร้อมท์คำสั่งของคุณ:

 ng new my-app

เมื่อคุณสร้างโปรเจ็กต์แล้ว ให้ไปที่ไดเร็กทอรีที่มีโปรเจ็กต์ในสภาพแวดล้อมการพัฒนาแบบรวม (IDE) ของคุณ และเปิดแอปพลิเคชันภายในนั้น

สร้างไปป์แบบกำหนดเอง

ในการพัฒนาแอปพลิเคชันเชิงมุม จำเป็นต้องสร้างรากฐานโดยการตั้งค่าโปรเจ็กต์และกำหนดค่าการขึ้นต่อกันที่จำเป็น เมื่อกระบวนการนี้เสร็จสิ้น ขั้นตอนต่อมาจะเกี่ยวข้องกับการสร้างตัวกรองแบบกำหนดเองผ่านการใช้ Angular Command Line Interface (CLI) ซึ่งช่วยให้สามารถสร้างส่วนประกอบเฉพาะที่สามารถรวมเข้ากับเทมเพลตของแอปพลิเคชันเพื่อทำงานเฉพาะหรือจัดการข้อมูลในลักษณะเฉพาะได้

ดำเนินการคำสั่งต่อไปนี้ภายในไดเรกทอรีโครงการที่เกี่ยวข้องโดยใช้อินเทอร์เฟซเทอร์มินัล:

 ng generate pipe customPipe

การดำเนินการคำสั่งนี้จะส่งผลให้มีการสร้างไฟล์สองไฟล์ ได้แก่ “custom-pipe.pipe.ts” และ “custom-pipe.pipe.spec.ts” ภายในโฟลเดอร์ “src/app” ไฟล์แรกเป็นไฟล์ TypeScript ที่เก็บการใช้งานไปป์แบบกำหนดเองของคุณ ในขณะที่ไฟล์หลังทำหน้าที่เป็นพื้นที่ทดสอบสำหรับการตรวจสอบการทำงานของไปป์แบบกำหนดเองดังกล่าวผ่านสถานการณ์การทดสอบต่างๆ

ภายในสคริปต์ custom-pipe.pipe.ts จะมีชุดคำสั่งการเขียนโปรแกรมดังนี้:

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

@Pipe({
  name: 'customPipe'
})
export class CustomPipePipe implements PipeTransform {
  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }
}

คำสั่งการนำเข้าโค้ดปัจจุบันได้รับ Pipe decorator และอินเทอร์เฟซ PipeTransform จากโมดูล @เชิงมุม/core มัณฑนากรไปป์ที่กล่าวมาข้างต้นมีหน้าที่รับผิดชอบในการกำหนดข้อมูลเมตาที่เกี่ยวข้องกับไปป์ ในขณะที่คลาสของไปป์สอดคล้องกับอินเทอร์เฟซ PipeTransform ดังกล่าว

ในการใช้งานคลาส CustomPipePipe เราปฏิบัติตามข้อกำหนดของอินเทอร์เฟซ PipeTransform โดยจัดเตรียมการดำเนินการของวิธีการแปลง วิธีการนี้มีหน้าที่สำคัญในการสร้างการเปลี่ยนแปลงข้อมูลอินพุต

วิธีการ"แปลง"รองรับตัวแปรอินพุตทั้งหมดสองตัว ได้แก่ พารามิเตอร์"value"ซึ่งแสดงถึงค่าการแปลงไปป์ และพารามิเตอร์"args"ที่ทำหน้าที่เป็นส่วนจัดสรรสำหรับข้อกำหนดเพิ่มเติมใดๆ ที่อาจต้องการรวมเข้าด้วยกัน

เมื่อเข้าใจโครงสร้างพื้นฐานของไฟล์ custom-pipe.pipe.ts แล้ว เราอาจทดแทนข้อมูลโค้ดที่ให้มาได้อย่างมีประสิทธิภาพดังนี้:

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

@Pipe({
  name: 'customPipe'
})
export class CustomPipePipe implements PipeTransform {
  transform(value: string): string[] {
    return value.split('');
  }
}

ในโค้ดชิ้นนี้ ฟังก์ชัน transform ยอมรับพารามิเตอร์ value ประเภท string ซึ่งถูกส่งผ่านเป็นอาร์กิวเมนต์ไปยังเมธอด จากนั้นฟังก์ชันนี้จะใช้เมธอด split เพื่อแบ่งสตริงอินพุตออกเป็นอาร์เรย์ของอักขระแต่ละตัว และส่งคืนอาร์เรย์ดังกล่าวในท้ายที่สุด

การรวม Custom Pipe เข้ากับแอปพลิเคชันของคุณ

ยินดีด้วย! คุณได้สร้างไปป์ส่วนบุคคลที่สามารถรวมเข้ากับเทมเพลต Angular ของคุณได้อย่างราบรื่น ก่อนที่จะใช้ไปป์ที่สั่งทำพิเศษในโปรเจ็กต์ของคุณ คุณต้องรวมและลงทะเบียนไว้ภายในไฟล์ app.module.ts ของคุณก่อน เพื่อให้บรรลุเป้าหมายนี้ เพียงแทนที่เนื้อหาปัจจุบันของไฟล์ app.module.ts ด้วยข้อมูลโค้ดที่ตามมา:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CustomPipePipe } from './custom-pipe.pipe';

@NgModule({
  declarations: [
    AppComponent,
    CustomPipePipe
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

อันที่จริง ตอนนี้เราอาจรวมไปป์ไว้ในไฟล์ app.component.html ของเทมเพลตโดยรวมมาร์กอัปที่กล่าวมาข้างต้น ซึ่งอำนวยความสะดวกในการใช้งานฟังก์ชันที่ต้องการ ขณะเดียวกันก็ปฏิบัติตามมาตรฐานการพัฒนาเว็บไซต์และแนวปฏิบัติที่ดีที่สุดที่กำหนดไว้

 <p>{{ 'apple' | CustomPipe }}</p>

ในภาพประกอบนี้ CustomPipe ถูกใช้เป็นวิธีการแปลงอักขระแต่ละตัวที่ประกอบด้วยสตริง’apple’ให้เป็นตัวแทนอาร์เรย์

ทดสอบท่อที่คุณกำหนดเอง

หากต้องการสังเกตการทำงานของไปป์ไลน์ที่ปรับแต่งของคุณ คุณควรเปิดเซิร์ฟเวอร์การพัฒนา Angular โดยการรันคำสั่งเทอร์มินัลที่กล่าวมาข้างต้น

 ng serve

เปิดเบราว์เซอร์ของคุณและไปที่ http://localhost:4200 คุณควรเห็นสตริงที่แปลงแล้วแสดงบนเพจ:

ยกระดับแอปพลิเคชันเชิงมุมของคุณไปอีกระดับ

ไปป์ไลน์ทำหน้าที่เป็นทรัพยากรที่โดดเด่นภายในกรอบงาน Angular ช่วยให้สามารถจัดการและปรับโครงสร้างข้อมูลทั่วทั้งแอปพลิเคชันของคุณ ด้วยการพัฒนาไปป์ไลน์ที่ออกแบบตามความต้องการ เราอาจเพิ่มความคล่องตัวของซอฟต์แวร์และเพิ่มมิติของไดนามิก

เพื่อยกระดับความเชี่ยวชาญของคุณด้วย Angular จำเป็นอย่างยิ่งที่จะต้องเข้าใจกลไกการกำหนดเส้นทางของมัน การจัดการเส้นทางมีบทบาทสำคัญในการนำทางผู้ใช้ตลอดทั้งแอปพลิเคชัน จึงช่วยเพิ่มทั้งการใช้งานและประสิทธิภาพของแอปพลิเคชันหน้าเดียว