כיצד ליצור צינורות מותאמים אישית בזווית

צינורות הם תכונה Angular רבת עוצמה המאפשרת לך לשנות ולעצב נתונים באפליקציה שלך. הם מספקים דרך נוחה לתפעל נתונים לפני הצגתם למשתמש, מה שהופך את האפליקציה שלך לדינמית וידידותית יותר למשתמש.

Angular מציעה מגוון צינורות מובנים כגון DatePipe, CurrencyPipe ו-UpperCasePipe. יחד עם הצינורות המובנים ש-Angular מציעה, אתה יכול ליצור צינורות מותאמים אישית כדי להפוך נתונים בכל דרך שתצטרך.

הגדר את הפרויקט הזוויתי שלך

לפני יצירת צינורות מותאמים אישית, ודא שאתה להבין צינורות ב-Angular. כדי להיות מסוגל להגדיר פרויקט Angular, ודא שה- Angular CLI מותקן במחשב שלך. אתה יכול להתקין אותו עם npm (מנהל חבילות צומת).

התקן את Angular CLI על ידי הפעלת הפקודה הבאה:

npm install -g @angular/cli

לאחר מכן, צור פרויקט Angular חדש על ידי הפעלת הפקודה הזו:

ng new my-app

לאחר שיצרת את הפרויקט, נווט אל ספריית הפרויקט שלך ופתח את היישום שלך ב-IDE שלך.

צור צינור מותאם אישית

כעת, לאחר שהגדרת את אפליקציית Angular שלך, הדבר הבא לעשות הוא ליצור צינור מותאם אישית. כדי ליצור צינור מותאם אישית, עליך ליצור צינור חדש באמצעות ה-Angular CLI.

כדי לעשות זאת, הפעל את הפקודה הבאה בספריית האפליקציה שלך בטרמינל:

ng generate pipe customPipe

פקודה זו תיצור שני קבצים בשם custom-pipe.pipe.ts ו מפרט.מפרט.pipe.pipe בתוך ה src/app מַדרִיך. הקובץ custom-pipe.pipe.ts הוא קובץ TypeScript שמכיל את הקוד להגדרת הצינור המותאם אישית שלך. תשתמש ב-custom-pipe.pipe.spec.ts כדי להריץ בדיקות על הצינור המותאם אישית.

בתוך ה custom-pipe.pipe.ts קובץ, תמצא את שורות הקוד הבאות:

import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
 name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
 transform(value: unknown, ...args: unknown[]): unknown {
returnnull;
 }
}

בלוק קוד זה מייבא את צינור מעצב ואת PipeTransform ממשק מה @זוויתי/ליבה מודול. מעצב הצינורות מגדיר את המטא נתונים עבור הצינור, ומחלקת הצינור מיישמת את ממשק ה-PipeTransform.

בתוך ה CustomPipePipe בכיתה, אתה מיישם את PipeTransform ממשק, הדורש יישום של שינוי צורה שיטה. שיטת הטרנספורמציה אחראית על הפיכת ערך הקלט.

ה שינוי צורה השיטה לוקחת שני פרמטרים, ערך ו args. פרמטר הערך מייצג את ערך הטרנספורמציה של הצינור, והפרמטר args מייצג פרמטרים אופציונליים שאולי תרצו להוסיף.

עכשיו הבנתם את הלוח של ה- custom-pipe.pipe.ts קובץ, החלף את גוש הקוד למעלה בקוד זה:

import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
 name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
 transform(value: string): string[] {
return value.split('');
 }
}

בבלוק קוד זה, ה שינוי צורה השיטה לוקחת את ערך פרמטר של הסוג חוּט כארגומנט ומחזיר מערך של מחרוזות. שיטת הטרנספורמציה מפצלת את מחרוזת הקלט למערך של תווים בודדים באמצעות ה- לְפַצֵל שיטה ומחזירה את המערך המתקבל.

שילוב הצינור המותאם אישית באפליקציה שלך

יצרת בהצלחה את הצינור המותאם אישית שלך וכעת תוכל להשתמש בו בתבניות 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]
})
exportclass AppModule { }

עכשיו אתה יכול להשתמש בצינור בתבניות שלך. פתח את ה app.component.html קובץ והוסיפו את הקוד הבא:

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

בדוגמה זו, אתה משתמש ב- CustomPipe צינור כדי להפוך את המיתר 'תפוח עץ' לתוך מערך מחרוזות.

בדוק את הצינור המותאם אישית שלך

כדי לראות את הצינור המותאם אישית שלך בפעולה, הפעל את שרת הפיתוח Angular. אתה יכול לעשות זאת על ידי הפעלת פקודת המסוף הבאה:

ng serve

פתח את הדפדפן שלך ונווט אל http://localhost: 4200. אתה אמור לראות את המחרוזת שעברה טרנספורמציה המוצגת בדף:

קח את יישומי הזווית שלך לשלב הבא

צינורות הם כלי Angular רב עוצמה המאפשר לך לשנות ולעצב נתונים ביישום שלך. אתה יכול ליצור צינורות מותאמים אישית שיתאימו לצרכים הספציפיים שלך ולהפוך את היישום Angular שלך לדינמי יותר.

דרך נוספת לקחת את יישומי Angular שלך לשלב הבא היא להבין ניתוב ב-Angular. ניתוב הוא מושג מפתח המאפשר לך לשלוט באופן שבו משתמשים מנווטים באפליקציה שלך. על ידי הבנת ניתוב, אתה יכול לבנות יישומים בני עמוד בודד שהם ידידותיים ויעילים יותר למשתמש.