فهم متعمق لبناء جملة قالب Angular2

1. الوصف

يتم استخدام قالب Angular2 لعرض مظهر المكونات. استخدامه هو في الأساس نفس بناء جملة HTML. أبسط قالب Angular2 هو قطعة من رمز HTML. يتضمن بناء جملة القالب الزاوي بشكل رئيسي الأجزاء التالية:

L الربط المباشر

تعبير الاستيفاء

س السمة الربط

L الحدث ملزمة

L ربط ثنائي الاتجاه

ملزمة نمط

قوالب و *

ل المتغيرات المحلية

أولاً ، دعونا نلقي نظرة على مثال على قالب ، كما هو موضح أدناه:

 استيراد {component ، onInit} من '@Angular/core' ؛@component ({Selector: 'Ui-Demo' ، template: `<form rom =" form "> <viv> <legend> title </legend> </div> intence> intence: {{msg}} </span> <div> name [attr.size] = "size" [alsholder] = "name"> </viv> <viv> <viv> العمر </div> <input type = "text" (change) = "change ()" id = "age" [placeholder] = "sex"> </viv> <div *ng-if = "needpwd"> <viv> pwd </viv> <input #inpwd type = "password" [(ngmodel)] = "pwd" id = "pwd" name = "pwd"> <button type = "button" (انقر) = "show (inpwd.value)"> تحذير </button> </div> <viv> <div [style.color] = "color"> <button type = "pridt" "الاحتياطات" ؛ الاسم: string = "name" ؛ الحجم: العدد = 4 ؛ العمر: العدد = 15 ؛ الجنس: string = 'male' ؛ needpwd: boolean = true ؛ pwd: string = '' ؛ color: string = "red" {console.log ($ event) ؛}}

1.1 الربط المباشر

ربط السلسلة مباشرة إلى السمة المقابلة ، على سبيل المثال ، ربط نموذج السلسلة بسمة العنوان

 <legend> العنوان </legend>

1.2 التعبير الاستيفاء

يتم التعبير عن تعبير الاستيفاء في شكل {{}} ، وترتبط قيم التعبير المقابل في المكون بالقالب للعرض. على سبيل المثال ، يتم عرض قيم تعبير MSG في المكون على النحو التالي.

 <span> الانتباه: {{msg}} </span>

1.3 السمة الربط

يتم التعبير عن ربط السمة في شكل [] ، ربط قيمة التعبير إلى السمة المقابلة ، على سبيل المثال ، ربط قيمة تعبير الاسم في المكون إلى صاحب النائب الخاصية الخاصية

 <viv> <viv> الاسم </div> <إدخال type = "text" id = "name" name = "name" [placeholder] = "name"> </viv>

عندما تكون هناك سمة مقابلة في العنصر المرتبط بالسمة ، يمكن استخدام [xx] للربط مباشرة. ومع ذلك ، عندما لا تكون هناك سمة مقابلة على العنصر ، يجب استخدام [attr.xxx] لإضافة نقطة لربط معلومات السمة المقابلة.

 <viv> <viv> الاسم </div> <input type = "text" id = "name" name = "name" [attr.size] = "size"

1.4 النمط الربط

يتضمن ربط النمط بشكل أساسي اثنين من النمط المريح ، على الطراز المريح وربط فئة النمط الخارجي.

1.4.1 الربط النمط

يشبه الربط النمط النمحي بربط الخصائص. ومع ذلك ، فإن الجزء الموجود في الأقواس المربعة ليس هو اسم السمة لعنصر ، ولكنه يتضمن بادئة نمط تليها نقطة (.) ، ثم اسم سمة نمط CSS. يشير إلى أن الخاصية تستخدم على العنصر المحدد ، كما هو موضح في: [style.style-perporty]. على سبيل المثال

 <viv> <div [style.color] = "color"> <button type = "submit" [class.btn-primary] = "isPrimary"> إرسال </button> </viv> </viv>

1.4.2 الربط الفئة

يشبه ربط فئة CSS بشكل نمطية لربط الخصائص. ومع ذلك ، فإن الجزء الموجود في الأقواس المربعة ليس هو اسم السمة لعنصر ، ولكنه يتضمن بادئة فئة متبوعة بنقطة (.) ، ثم تتكون من اسم فئة CSS ، كما هو موضح في: [class.class-name]. يشير إلى ما إذا كنت تريد استخدام فئة CSS على هذا العنصر أو إزالة فئة CSS. إذا كانت القيمة التالية صحيحة ، فسيتم استخدام الجدول. وسائل كاذبة لإزالته.

 <viv> <div [style.color] = "color"> <button type = "submit" [class.btn-primary] = "isPrimary"> إرسال </button> </viv> </viv>

1.5 * مع <قالب>

أولاً ، دعنا نلقي نظرة على مثال على * و <قالب>.

 <div *ng-if = "needpwd"> <viv> pwd </viv> <input type = "password" [(ngmodel)] = "pwd" id = "pwd" name = "pwd"> </viv>

* هو سكر بناء الجملة الذي يسهل قراءة وكتابة التعليمات التي تتطلب قوالب لتعديل تخطيطات HTML. NGFOR و NGIF و NGSWITCH جميعها تضيف أو إزالة القطع الفرعية التي يتم لفها في علامة <mapplate>. استخدم بناء جملة * بادئة لتجاهل علامة <mapplate>

 <template [ngif] = "negedpwd"> <viv> <viv> pwd </viv> <input type = "password" [(ngmodel)] = "pwd" id = "pwd" name = "pwd"> </viv> </template>

1.6 المتغيرات المحلية

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

 <div *ng-if = "needpwd"> <viv> pwd </viv> <input #inpwd type = "password" [(ngModel)] = "pwd" id = "pwd" name = "pwd"> <button type = "button" (click) = "show (inpwd.value)"

1.7 الحدث ملزمة

يتم التعبير عن ربط السمة في شكل () ويربط طريقة المكون بالحدث المقابل. على سبيل المثال ، تربط وظيفة التغيير بحدث التغيير ، وسيتم تشغيل وظيفة التغيير عند حدوث حدث التغيير.

 <viv> <viv> العمر </div> <input type = "text" (تغيير) = "تغيير ()" id = "Age" name = "Age" [extensher] = "Age"> </viv>

1.8 ربط في اتجاهين

يستخدم الربط ثنائي الاتجاه طريقة [()] لتمثيل أن الربط ثنائي الاتجاه هو مزيج من ربط السمات وربط الأحداث. الربط ثنائي الاتجاه الأكثر استخدامًا هو استخدام [(ngmodel)] = "xxx" في النموذج. عند تعديل البيانات في النموذج ، سيتم تعديل عناصر البيانات المرتبطة. كما هو موضح أدناه: عندما يتم إدخال النموذج للتعديل ، سيتم أيضًا تعديل متغير الجنس بشكل متزامن

 <viv> <viv> sex </viv> <type type = "text" [(ngmodel)] = "sex" id = "sex" name = "sex"

ما سبق هو المعرفة ذات الصلة بقواعد النماذج Angular2 التي قدمها لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، يرجى ترك رسالة لي. سوف يرد المحرر لك في الوقت المناسب. شكرًا جزيلاً على دعمكم لموقع Wulin Network!