دليل شامل للأنابيب في الزاوية

تسمح الأنابيب في Angular للمستخدمين بتحويل البيانات قبل عرضها في طريقة العرض. تشبه الأنابيب المرشحات في لغات البرمجة الأخرى ولكنها أكثر مرونة ويمكن تخصيصها لتلبية احتياجات معينة. هنا ، سوف تستكشف كيفية استخدام الأنابيب في تطبيق Angular الخاص بك.

ما هي الأنابيب في الزاوية؟

الأنابيب الزاويّة هي محولات بيانات تجعل تطبيقك أكثر ديناميكية. يأخذون قيمة كمدخل ويعيدون قيمة محولة كإخراج. يمكن أن يكون تحويل البيانات بسيطًا مثل تنسيق تاريخ أو عملة أو معقدًا مثل تصفية قائمة العناصر أو فرزها.

يمكنك استخدام الأنابيب في مكونات Angular الخاصة بك والقوالب الخاصة بك. الأنابيب سهلة الاستخدام ، ويمكنك ربطها لإنشاء تحويلات أكثر تعقيدًا.

توفر شركة Angular العديد من الأنابيب المدمجة بما في ذلك DatePipe, UpperCasePipe, LowerCasePipe, العملة, عشري, نسبة الأنابيب, JsonPipe, شريحة، و AsyncPipe. كما يوفر أيضًا وظيفة إنشاء أنابيب مخصصة.

يؤدي كل أنبوب زاوية مدمج وظيفة فريدة ويمكن أن يساعدك في تحويل البيانات.

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>

اجتازت كتلة التعليمات البرمجية أعلاه التاريخ القصير المعلمة إلى DatePipe. هذا يخبر DatePipe لتنسيق التاريخ باستخدام تنسيق التاريخ القصير. جنبا إلى جنب مع التاريخ القصير المعلمة ، يمكنك تكوين DatePipe باستخدام معلمات مختلفة ، بما في ذلك ض, longDateوتنسيقات التاريخ المخصصة مثل يوم / شهر / سنة.

UpperCasePipe و LowerCasePipe

ال UpperCasePipe و LowerCasePipe تحويل النصوص الخاصة بك. يمكنك تحويل النصوص الخاصة بك إلى أحرف كبيرة باستخدام امتداد UpperCasePipe وأحرف صغيرة باستخدام LowerCasePipe.

لاستخدام ال UpperCasePipe و LowerCasePipe، أضف رمز الأنبوب (|) متبوعًا بـ أحرف صغيرة لاستخدام ال LowerCasePipe أو الأحرف الكبيرة لاستخدام ال UpperCasePipe.

يوجد أدناه مثال على كيفية استخدام ملف UpperCasePipe و LowerCasePipe:

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

العملة

باستخدام العملة، يمكنك تنسيق الأرقام بعملة في التطبيق الخاص بك. ال العملة تنسيقات الأرقام وفقًا للإعدادات المحلية الخاصة بك. لتنسيق الأرقام الخاصة بك باستخدام العملة، استخدم رمز الأنبوب متبوعًا بـ عملة.

على سبيل المثال:

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

في هذا المثال ، فإن ملف العملة يحول متغير الرقم إلى عملة. بشكل افتراضي ، فإن ملف العملة يحول المتغيرات إلى دولارات. لتغيير هذا ، يمكنك تكوين ملف العملة للتحويل إلى عملات أخرى عن طريق تمرير معلمات إضافية.

هنا مثال:

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

هنا ، تقوم بتمرير GBP المعلمة إلى العملة. هذا يضمن أن رقم متغير يحول إلى عملة بريطانيا العظمى.

DecimalPipe و PercentPipe

ال عشري يحول الأرقام الخاصة بك إلى كسور عشرية ، بينما نسبة الأنابيب يحول الأرقام الخاصة بك إلى نسب مئوية.

لاستخدام ال عشري، استخدم رمز الأنبوب متبوعًا بـ رقم ومعلمات إضافية. لاستخدام ال نسبة الأنابيب، افعل الشيء نفسه ولكن استبدل ملف رقم مع نسبه مئويه مع عدم وجود معلمات إضافية.

على سبيل المثال:

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

المعلمات الإضافية التي تم تمريرها إلى عشري التحكم في عدد الأرقام الصحيحة والكسرية المعروضة. ال 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 ، والتي يمكنك فحصها بسرعة في القوالب الخاصة بك أثناء التطوير أو تصحيح الأخطاء.

شريحة

ال شريحة يشبه إلى حد بعيد جافا سكريبت شريحة() طريقة. ال شريحة تنسيقات المصفوفات أو السلاسل من خلال استخراج عناصرها لإنشاء مصفوفات أو سلاسل جديدة.

لاستخدام ال شريحة، يمكنك استخدام رمز الأنبوب متبوعًا بـ شريحة واثنين من المعلمات ، فهارس البداية والنهاية. مؤشر البداية هو الموضع في المصفوفة أو السلسلة حيث سيبدأ الأنبوب في استخراج العناصر ، ومؤشر النهاية هو المكان الذي سيتوقف فيه الأنبوب عن استخراج العناصر.

فيما يلي مثال على كيفية استخدام ملف شريحة:

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

في هذا المثال ، فإن ملف شريحة سوف يستخرج أول عنصرين من خيط متغير ، العنصر في الفهرس 0 والعنصر في الفهرس 1. علاوة على ذلك ، سيتم استخراج العنصر الأول من ملف مجموعة مصفوفة عامل. ال شريحة مفيد عندما تريد عرض جزء فقط من البيانات في القالب.

AsyncPipe

AsyncPipe عبارة عن أنبوب Angular مدمج يقوم تلقائيًا بالاشتراك وإلغاء الاشتراك في أحد العروض التي يمكن ملاحظتها أو الوعد. تقوم بإرجاع أحدث قيمة صادرة من الملاحظة أو الوعد.

صيغة الاستخدام AsyncPipe على النحو التالي:

{{ expression | async }}

هنا ، التعبير هو الملاحظ أو الوعد الذي تريد الاشتراك فيه.

على سبيل المثال:

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

يمكنك استخدام AsyncPipe للاشتراك في هذا المرصد وعرض أحدث قيمة منبعثة مثل هذا:

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

ستخرج كتلة التعليمات البرمجية هذه أحدث رقم تم إرساله بواسطة Observable. AsyncPipe مفيد جدًا عند التعامل مع العمليات غير المتزامنة في القوالب الخاصة بك. يشترك تلقائيًا في الملاحظة أو الوعد عند تهيئة المكون وإلغاء الاشتراك عند إتلافه.

ربط الأنابيب في الزاوية

يمكنك ربط الأنابيب ببعضها البعض لإجراء تحويلات متعددة بتعبير واحد. تسلسل الأنابيب بسيط مثل استخدام العديد من مشغلي الأنابيب (|) في تعبير واحد. يصبح إخراج كل أنبوب هو مدخلات التالية.

إليك البنية الأساسية:

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

على سبيل المثال ، يمكنك تحويل كائن تاريخ إلى سلسلة باستخدام ملحق DatePipe ثم قم بتحويل هذه السلسلة إلى أحرف كبيرة باستخدام UpperCasePipe.

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

إنشاء تطبيقات ديناميكية باستخدام الأنابيب

الأنابيب هي ميزة قوية في Angular تسمح لك بتحويل البيانات قبل عرضها في العرض. هنا ، تعرفت على عروض Angular المختلفة للأنابيب المضمنة ، مثل DatePipe و CurrencyPipe و UpperCasePipe وما إلى ذلك. لقد تعلمت أيضًا كيفية استخدامها في تطبيقك لإنشاء محتوى أكثر ديناميكية. باستخدام الأنابيب ، يمكن للمطورين إنشاء تطبيقات ويب أكثر مرونة وديناميكية مع تعليمات برمجية أقل.