מדריך מקיף לצינורות בזווית

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

מה זה צינורות בזווית?

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

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

Angular מספקת מספר צינורות מובנים כולל DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, JsonPipe, SlicePipe, ו AsyncPipe. זה גם מספק את הפונקציונליות ליצור צינורות מותאמים אישית.

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

DatePipe

ה DatePipe פורמטים ותצוגות משתני התאריך והשעה שלך

בפורמט מוגדר, בהתחשב במקום שלך. בניגוד למסגרות אחרות שדורשות חבילות JavaScript לעיצוב תאריך ושעה, Angular משתמש ב- DatePipe. להשתמש DatePipe ביישום שלך, הוסף את סמל הצינור (|) ואחריו תַאֲרִיך וכל פרמטר נוסף.

לדוגמה:

<p>Today's date is {{ currentDate | date }}p>

בדוגמה זו, אתה עובר את דייט נוכחי משתנה דרך ה DatePipe, אשר לאחר מכן מעצב אותו לפי תבנית ברירת המחדל של התאריך. אתה מגדיר את דייט נוכחי משתנה בקובץ TypeScript של הרכיב שלך.

הנה דוגמא:

import { Component } from'@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
exportclass AppComponent {
 currentDate: any = newDate();
}

אתה יכול גם להעביר פרמטרים נוספים ל- DatePipe כדי להתאים אישית את הפלט:

<p>Today's date is {{ currentDate | date:'shortDate' }}p>

בלוק הקוד למעלה עבר את shortDate פרמטר ל- DatePipe. זה אומר ל DatePipe כדי לעצב את התאריך באמצעות פורמט התאריך הקצר. לצד ה shortDate פרמטר, אתה יכול להגדיר את DatePipe באמצעות פרמטרים שונים, כולל ז, longDate, ותבניות תאריך מותאמות אישית כגון dd/MM/YY.

UpperCasePipe ו- LowerCasePipe

ה UpperCasePipe ו LowerCasePipe להפוך את הטקסטים שלך. אתה הופך את הטקסטים שלך לאותיות רישיות באמצעות ה UpperCasePipe ואותיות קטנות באמצעות LowerCasePipe.

כדי להשתמש ב UpperCasePipe ו LowerCasePipe, הוסף את סמל הצינור (|) ואחריו אותיות קטנות להשתמש ב LowerCasePipe אוֹ אותיות רישיות להשתמש ב UpperCasePipe.

להלן דוגמה כיצד להשתמש ב- UpperCasePipe ו LowerCasePipe:

<p>{{ message | uppercase}}p>
<p>{{ message | lowercase}}p>

CurrencyPipe

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

לדוגמה:

<p>{{ number | currency }}p>

בדוגמה זו, ה CurrencyPipe ממירה את משתנה המספר למטבע. כברירת מחדל, ה CurrencyPipe ממירה משתנים לדולרים. כדי לשנות זאת, אתה יכול להגדיר את CurrencyPipe להמיר למטבעות אחרים על ידי העברת פרמטרים נוספים.

הנה דוגמא:

<p>{{ number | currency: 'GBP' }}p>

הנה, אתה עובר את ליש"ט פרמטר ל- CurrencyPipe. זה מבטיח כי מספר משתנה ממיר למטבע הפאונד הבריטי.

DecimalPipe ו-PercentPipe

ה DecimalPipe הופך את המספרים שלך לעשרונים, בעוד ה- PercentPipe ממירה את המספרים שלך לאחוזים.

כדי להשתמש ב DecimalPipe, השתמש בסמל הצינור ואחריו מספר ופרמטרים נוספים. כדי להשתמש ב PercentPipe, עשה את אותו הדבר אבל החלף את מספר עם אָחוּז ללא פרמטרים נוספים.

לדוגמה:

<p>{{ number | number: '1.2-3' }}p>
<p>{{ number | percent }}p>

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

JsonPipe

ה JsonPipe הוא צינור מובנה הממיר נתונים לפורמט מחרוזת JSON. הוא משמש בעיקר למטרות ניפוי באגים. אתה יכול להשתמש ב JsonPipe גם על אובייקטים וגם על מערכים.

התחביר לשימוש ב- JsonPipe הוא כדלקמן:

{{ expression | json }}

כאן, ביטוי הוא הנתונים שברצונך להמיר לפורמט JSON. מפעיל הצינור (|) מחיל את JsonPipe לביטוי.

לדוגמה, הגדר אובייקט ומערך ברכיב שלך:

import { Component } from"@angular/core";
@Component({
 selector: "app-root",
 templateUrl: "./app.component.html",
 styleUrls: ["./app.component.scss"],
})
exportclass AppComponent {
 user: data = {
 firstname: "John",
 lastname: "Doe",
 };
 profiles: data[] = [
 {
 firstname: "John",
 lastname: "Doe",
 },
 {
 firstname: "Peter",
 lastname: "Parker",
 },
 ];
}
interface data {
 firstname: string;
 lastname: string;
}

בלוק הקוד למעלה מגדיר את א מִשׁתַמֵשׁ חפץ וא פרופילים מַעֲרָך. כעת, אתה יכול להשתמש ב- JsonPipe כדי להמיר את האובייקט והמערך ל-JSON.

<p>{{ user | json}}p>
<p>{{ profiles | json}}p>

הנה ה JsonPipe ימיר את מִשׁתַמֵשׁ חפץ ואת פרופילים מערך לתוך מחרוזת JSON, אותה תוכל לבדוק במהירות בתבניות שלך במהלך פיתוח או ניפוי באגים.

SlicePipe

ה SlicePipe דומה מאוד ל-JavaScript פרוסה() שיטה. ה SlicePipe מעצבים מערכים או מחרוזות על ידי חילוץ האלמנטים שלהם כדי ליצור מערכים או מחרוזות חדשות.

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

להלן דוגמה כיצד להשתמש ב- SlicePipe:

<p>{{ string | slice: 0:2}}p>
<p>{{ array | slice: 0:1}}p>

בדוגמה זו, ה SlicePipe יחלץ את שני האלמנטים הראשונים מה- חוּט משתנה, האלמנט באינדקס 0 והאלמנט באינדקס 1. יתר על כן, זה יחלץ את האלמנט הראשון מה- מַעֲרָך מִשְׁתַנֶה. ה SlicePipe שימושי כאשר ברצונך להציג רק חלק מהנתונים בתבנית.

AsyncPipe

AsyncPipe הוא צינור Angular מובנה שנרשם ומבטל את המנוי באופן אוטומטי ל-Observable או Promise. הוא מחזיר את הערך האחרון שנפלט על ידי הנצפה או ההבטחה.

התחביר לשימוש AsyncPipe הוא כדלקמן:

{{ expression | async }}

כאן, הביטוי הוא הנצפה או ההבטחה שאתה רוצה להירשם אליו.

לדוגמה:

let numbers = of(1, 2, 3, 4, 5);

אתה יכול להשתמש AsyncPipe כדי להירשם ל-Observable זה ולהציג את הערך האחרון שנפלט כך:

<p>{{ numbers | async }}p>

בלוק קוד זה יוציא את המספר האחרון שנפלט על ידי ה- Observable. AsyncPipe שימושי מאוד בעת טיפול בפעולות אסינכרוניות בתבניות שלך. הוא נרשם אוטומטית ל- Observable או Promise כאשר הרכיב מאתחל ומבטל את המנוי כאשר הוא נהרס.

שרשרת צינורות בזווית

אתה יכול לשרשר צינורות יחד כדי לבצע טרנספורמציות מרובות בביטוי אחד. שרשרת צינורות היא פשוטה כמו שימוש במספר אופרטורים של צינורות (|) בביטוי אחד. הפלט של כל צינור הופך לקלט עבור הבא.

להלן התחביר הבסיסי:

<p>{{ expression | pipe1 | pipe2 |... }}p>

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

<p>Today's date is {{ currentDate | date:'shortDate' | uppercase }}p>

צור יישומים דינמיים באמצעות צינורות

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