يعد المكون أحد أهم اللبنات الأساسية لتطبيق Angular. المكونات عبارة عن أجزاء برمجية قابلة لإعادة الاستخدام تشكل أقسامًا معينة من موقع الويب الخاص بك.
تتضمن أمثلة المكونات التي يمكنك إنشاؤها عناصر واجهة مستخدم أصغر مثل الأزرار أو البطاقات. يمكن أن تتضمن أيضًا عناصر واجهة مستخدم أكبر مثل الأشرطة الجانبية أو أشرطة التنقل أو صفحات كاملة.
باستخدام المكونات في الزاوية
عندما تقوم بإنشاء مكونات في تطبيق Angular ، يمكنك استخدامها داخل مكونات أخرى. على سبيل المثال ، يمكنك إنشاء مكون لعنصر بطاقة واجهة مستخدم كبير. يمكنك بعد ذلك استخدام هذا المكون كعلامة HTML عادية ، في أي مكان تريد:
<التطبيق الجديد المكون></app-new-component>نظرًا لأن المكونات قابلة لإعادة الاستخدام بتات من التعليمات البرمجية ، يمكنك أيضًا تمرير المتغيرات بحيث تكون البيانات لكل مثيل مختلفة. يمكنك أيضًا إنشاء مكونات للصفحات ، ويمكنك التوجيه إليها وفقًا لذلك باستخدام ملف app-routing.module.ts ملف.
يمكنك تصميم المكونات الخاصة بك بناءً على هيكل التطبيق الخاص بك ، ومقدار ما تريد فصل وظائفك.
كيفية إنشاء مكون
يمكنك استخدام ال نانوغرامتوليد الأمر لإنشاء مكون جديد.
- إنشاء ملف تطبيق الزاوي استخدام نانوغرام جديد أو فتح واحدة موجودة.
- افتح موجه الأوامر أو المحطة الطرفية. بدلاً من ذلك ، إذا كان تطبيق Angular الخاص بك مفتوحًا في ملف IDE مثل Visual Studio Code، يمكنك استخدام الجهاز المدمج.
- في المحطة ، انتقل إلى موقع المجلد الجذر للمشروع. فمثلا:
قرص مضغوط C: \ Users \ Sharl \ Desktop \ Angular-Application - قم بتشغيل نانوغرام إنشاء المكون الأمر ، متبوعًا باسم المكون الجديد:
نانوغرام إنشاء مكون بطاقة واجهة المستخدم - سيتم إنشاء المكون الجديد في مجلد جديد داخل ملف src / التطبيق الدليل.
كيفية إضافة محتوى إلى المكون الزاوي
يقوم Angular بإنشاء كل مكون باستخدام ملف HTML و CSS و TypeScript وملف بمواصفات الاختبار.
- ال ملف HTML يخزن محتوى HTML للمكون.
- ال ملف CSS يخزن تصميم المكون.
- ال ملف مواصفات الاختبار (spec.ts) يخزن أي اختبارات وحدة للمكون.
- ال ملف TypeScript يخزن المنطق والوظيفة التي تحدد المكون.
أضف بعض المحتوى إلى مكون بطاقة ui المخصص.
- فتح src / app / ui-card / ui-card.component.html، وتحديث HTML للمكون. تأكد من أن لديك صورة تستخدم نفس الاسم في مجلد باسم src / الأصول / الصور في تطبيق Angular الخاص بك. استبدل محتوى ui-card.component.html كالآتي:
<فئة div ="بطاقة">
<img src ="./assets/images/blue-mountains.jpg" بديل ="الصورة الرمزية">
<فئة div ="وعاء">
<فئة h4 ="لقب"> الجبال الزرقاء </h4>
<ص> نيو ساوث ويلز ، أستراليا </ ص>
</div>
</div> - فتح ui-card.component.css، وأضف محتوى CSS إلى المكون:
.بطاقة {
مربع الظل: 0 4مقصف 8مقصف 0 rgba(0, 0, 0, 0.2);
العرض: 400مقصف;
حشوة: 8مقصف;
حافة: 24مقصف;
لون الخلفية: دخان ابيض;
خط العائلة: بلا الرقيق;
}.بطاقةIMG {
أقصى عرض: 400مقصف;
}.لقب {
أعلى الحشو: 16مقصف;
}.وعاء {
حشوة: 2مقصف 16مقصف;
} - ال ui-card.component.ts يحتوي الملف بالفعل على فئة للمكون الجديد حيث يمكنك إضافة وظائف ومنطق ووظائف جديدة. يجب أن تبدو هذه:
يصدّرصف دراسي مكون UiCard الأدوات OnInit {
البناء() { }
ngOnInit (): فارغ {
// أضف بعض منطق الكود هنا
}
// أو أضف منطقك ووظائفك في وظائف جديدة
}
كيفية استخدام المكون في HTML لمكون آخر
داخل ui-card.component.ts، هناك ثلاث سمات: selector و templateUrl و styleUrl. يشير templateUrl إلى HTML الخاص بالمكون (وبالتالي يرتبط بملف HTML). تشير السمة styleUrls إلى CSS الخاص بالمكون والارتباطات بملف CSS.
@مكون({
المحدد: "app-ui-card"،
templateUrl: "./ui-card.component.html" ،
styleUrls: ['./ui-card.component.css']
})عند استخدام مكون بطاقة واجهة المستخدم في مكون آخر ، ستستخدم اسم محدد "app-ui-card".
- أولاً ، أضف بعض المحتوى إلى صفحة الويب الخاصة بك. فتح src / app / app.component.html وأضف شريط التنقل:
<فئة div ="نافبار رأس">
<فئة ="عنوان التنقل"><ب> شريط التنقل على الويب </ب></أ>
</div> - أضف بعض التصميم إلى شريط التنقل الخاص بك بتنسيق src / app / app.component.css:
.navbar- رأس {
لون الخلفية: # 07393 ج;
حشوة: 30مقصف 50مقصف;
عرض: ثني;
محاذاة العناصر: المركز;
خط العائلة: بلا الرقيق;
}.nav-title {
زخرفة النص: لا أحد;
اللون: أبيض;
حجم الخط: 16نقطة;
} - تحت شريط التنقل في app.component.html، أضف بطاقة واجهة مستخدم جديدة. استخدم اسم محدد "app-ui-card" كعلامة HTML:
<بطاقة واجهة المستخدم للتطبيق></app-ui-card> - يمكنك أيضًا إعادة استخدام المكون من خلال تضمين العلامة عدة مرات. للقيام بذلك ، استبدل السطر أعلاه لاستخدام علامات HTML متعددة لبطاقات واجهة المستخدم للتطبيق بدلاً من ذلك:
<أسلوب div ="العرض: فليكس">
<بطاقة واجهة المستخدم للتطبيق></app-ui-card>
<بطاقة واجهة المستخدم للتطبيق></app-ui-card>
<بطاقة واجهة المستخدم للتطبيق></app-ui-card>
</div> - قم بتشغيل تطبيق Angular الخاص بك من الجهاز باستخدام ملف يخدم ng الأمر ، وافتح موقع الويب الخاص بك في متصفح الويب.
كيفية تمرير معلمات الإدخال إلى المكون
نظرًا لأن المكون قابل لإعادة الاستخدام ، فهناك سمات قد ترغب في تغييرها في كل مرة تستخدمها. في هذه الحالة ، يمكنك استخدام معلمات الإدخال.
- يضيف إدخال إلى قائمة الواردات في الجزء العلوي من ui-card.component.ts:
يستورد {مكون ، إدخال ، تشغيل} من '@ مستطيل/core'; - ثم أضف متغيري إدخال داخل ملف UICardComponent صف دراسي. سيتيح لك ذلك تغيير اسم الموقع والصورة التي تظهر على البطاقة. يسكن ngOnInit تعمل كما هو موضح ، لبناء المسار إلى الصورة أو استخدام قيمة افتراضية:
يصدّرصف دراسي مكون UiCard الأدوات OnInit {
@إدخال() اسم الموقع: سلسلة;
@إدخال() اسم الصورة: سلسلة;البناء() { }
ngOnInit (): فارغ {
إذا (هذه.اسم الصورة) {
هذه.imageName = "./assets/images/" + هذه.اسم الصورة؛
} آخر {
هذه.imageName = "./assets/images/blue-mountains.jpg" ؛
}
}
} - في ui-card.component.html، قم بتغيير قيمة "بلو ماونتينز" المشفرة بالعنوان 4 لاستخدام متغير الإدخال "locationName" بدلاً من ذلك. أيضا تغيير الثابت مشفر src السمة في علامة الصورة لاستخدام متغير الإدخال "اسم الصورة":
<فئة div ="بطاقة">
<img src ="{{اسم الصورة}}" بديل ="الصورة الرمزية">
<فئة div ="وعاء">
<فئة h4 ="لقب">{{اسم الموقع؟ اسم الموقع: 'الجبال الزرقاء'}}</h4>
<ص>نيو ساوث ويلز ، أستراليا</ ص>
</div>
</div> - في app.component.html، قم بتعديل علامات "app-ui-card" لتضمين مدخلات "locationName" و "imageName". لكل عنصر بطاقة واجهة مستخدم ، أدخل قيمة مختلفة. تأكد من وجود ملفات الصور في مجلد الأصول / الصور في تطبيق Angular الخاص بك.
<أسلوب div ="العرض: فليكس">
<app-ui-card [locationName] ="'الجبال الزرقاء'" [اسم الصورة] ="'الجبال الزرقاء. jpg'"></app-ui-card>
<app-ui-card [locationName] ="'سيدني'" [اسم الصورة] ="'sydney.jpg'"></app-ui-card>
<app-ui-card [locationName] ="'نيوكاسل'" [اسم الصورة] ="'newcastle.jpg'"></app-ui-card>
</div> - قم بتشغيل تطبيق Angular الخاص بك من الجهاز باستخدام ملف يخدم ng الأمر ، وافتح موقع الويب الخاص بك في متصفح الويب.
قد ترى خطأً في هذه المرحلة حول عدم احتواء هذه الخصائص على مُهيئ. إذا كان الأمر كذلك ، فما عليك سوى إضافة أو تعيين "rictPropertyInitialization ": خطأ في الخاص بك tsconfig.json.
كيفية التوجيه إلى مكون جديد
إذا كان المكون الخاص بك يمثل جزءًا كبيرًا من موقع الويب الخاص بك مثل صفحة جديدة ، فيمكنك أيضًا التوجيه إلى هذا المكون.
- فتح app-routing.module.ts. قم باستيراد مكون بطاقة واجهة المستخدم أعلى الملف:
يستورد {UiCardComponent} من "./ui-card/ui-card.component" ؛ - أضف مسار توجيه إلى مصفوفة المسارات:
مقدار ثابت المسارات: الطرق = [
//... أي طرق أخرى قد تحتاجها ...
{المسار: 'uicard' ، المكون: UiCardComponent} ،
] - استبدل كل المحتوى الحالي بتنسيق app.component.html لتضمين شريط التنقل فقط وعلامة HTML الخاصة بمنفذ جهاز التوجيه. منفذ جهاز التوجيه يسمح لك بالتوجيه بين الصفحات. أضف ارتباطًا تشعبيًا إلى شريط التنقل ، مع تطابق سمة href مع المسار في مصفوفة المسارات:
<فئة div ="نافبار رأس">
<فئة ="عنوان التنقل"><ب> شريط التنقل على الويب </ب></أ>
<فئة ="التنقل في الرابط" href ="/uicard"><ب> بطاقة واجهة المستخدم </ب></أ>
</div>
<منفذ جهاز التوجيه></router-outlet> - أضف بعض الأنماط إلى رابط بطاقة واجهة المستخدم الجديدة ، بتنسيق app.component.css:
.nav-a-link {
زخرفة النص: لا أحد;
اللون: # 4b6569;
حجم الخط: 14نقطة;
الهامش الأيسر: 60مقصف;
وزن الخط: ولاعة;
} - قم بتشغيل تطبيق Angular الخاص بك من الجهاز باستخدام ملف يخدم ng الأمر ، وافتح موقع الويب الخاص بك في متصفح الويب. سيظهر الارتباط في شريط التنقل على صفحة الويب.
- قم بتدوين عنوان URL في متصفح الويب الخاص بك. بشكل افتراضي ، هو عادة http://localhost: 4200/. عند النقر فوق ارتباط بطاقة واجهة المستخدم ، سيتم توجيه الصفحة إلى http://localhost: 4200 / uicardوستظهر بطاقة واجهة المستخدم.
تكوين مكونات في Angular
المكوِّن هو أحد اللبنات الأساسية في Angular. تسمح لك المكونات بتقسيم أقسام مختلفة من موقع الويب الخاص بك إلى أجزاء أصغر قابلة لإعادة الاستخدام. يمكنك تحويل أي شيء إلى مكونات ، بما في ذلك الأزرار الصغيرة والبطاقات والأشرطة الجانبية الكبيرة وأشرطة التنقل.
يمكنك أيضًا استخدام متغيرات الإدخال لتمرير البيانات عبر مثيلات مختلفة من المكون. ويمكنك التوجيه إلى المكون باستخدام مسارات URL.
إذا كنت تطور تطبيق Angular جديدًا ، فقد تحتاج إلى إنشاء شريط تنقل للمستخدمين للتنقل عبر المكونات الخاصة بك. يسمح لك وجود شريط تنقل سريع الاستجابة بمشاهدته على أجهزة مختلفة ، عبر أحجام شاشات مختلفة.
