[MUSIC]
إذا كان لديك موقع ويب ثابت،
ثم لديك جميع البيانات التي تحتاج إليها من أجل بناء موقع الويب الخاص بك.
وسيتم إنشاؤه مرة واحدة وموقع الويب الخاص بك على استعداد للذهاب.
ولكن العديد من المواقع هذه الأيام مدفوعة بالبيانات من الخلفية.
سيؤدي تطبيق الويب الخاص بك إلى جلب البيانات من خادم الواجهة الخلفية
ثم استخدام البيانات لتخطيط المحتوى بشكل ديناميكي على موقع الويب الخاص بك، أو
حتى تحديث المحتوى على موقع الويب الخاص بك.
لذلك يتطلب هذا تدفق البيانات من الواجهة الخلفية من خلال
تطبيق الويب الخاص بك إلى DOM.
ويجب نقل أي تفاعل مستخدم على DOM مرة أخرى إلى تطبيق الويب الخاص بك.
لذلك يتطلب هذا الاتصال بين DOM
والمكون الخاص بك في الإطار الزاوي على سبيل المثال.
دعونا ننظر في كيفية حدوث هذا داخل الإطار الزاوي
ومع مزيد من التفاصيل قليلا.
وما تعلمناه حتى الآن هو كيفية إعداد عنصر ما.
لذلك رأينا أن المكون يحتوي على جزأين رئيسيين،
ملف typescript حيث يتم تعريف بنية المكون، والخصائص.
وطرق ثم لديك القالب الذي
يحدد كيفية وضع المحتوى، وإضافته إلى DOM.
لذا فإن القالب هو القالب الذي سيتم توفيره بواسطة مكون
لاحتلال جزء من صفحة الويب الخاصة بك.
لذلك يشكل القالب وسيطة الاتصال إلى DOM الخاص بك.
ويتطلب هذا القالب الحصول على البيانات من المكون الخاص بك من أجل
تقديم أجزاء من المحتوى على القالب الخاص بك
وبالمقابل داخل DOM لصفحة الويب الخاصة بك.
الآن، إذا لم يكن لديك ترف إطار عمل مثل Angular،
فيجب عليك التعامل مع التفاصيل الكاملة حول كيفية
تدفق البيانات من موقع التطبيق إلى DOM.
وكيف
سيتم إرسال أحداث تفاعل المستخدم التي تسببت في DOM مرة أخرى إلى التطبيق الخاص بك.
لحسن الحظ، مع عمل الإطار مثل Angular،
فإنها تدعم كل هذه السلوكيات بطبيعتها.
الآن لقد رأينا بالفعل استخدام واحد لتدفق البيانات من
خاصية المكونات إلى القالب في التدريبات السابقة.
حيث استخدمنا الأقواس المتعرجة المزدوجة لتوفير المعلومات التي
هي من متغير في رمز TypeScript المكون الخاص بك، إلى القالب الخاص بك.
سننظر في طرق أخرى،
ثم أيضًا في التمرين التالي، سنستفيد من هذا،
لتعديل التطبيق الزاوي الذي قمنا بتطويره حتى الآن.
ما كنا نتحدث عنه، حتى الآن، هو ربط البيانات،
آلية لتنسيق تدفق المعلومات بين القالب
والمكون، أو بين DOM والمكون.
في مستوى المكون، هو نوع من خاصية أو
طريقة تحتاج إما إلى توفيرها إلى القالب أو استدعاؤها من DOM.
أو على جانب القالب، قد تكون بعض المعلومات
المطلوبة من قبل القالب ليتم عرضها في DOM أو
حتى من DOM التي تم التقاطها وإرسالها مرة أخرى إلى المكون الخاص بك.
لذلك يتطلب كل هذا البيانات المتدفقة من المكون إلى
القالب أو الأحداث التي يتم جمعها من DOM أو
ليتم إرسالها مرة أخرى إلى المكون الخاص بك حتى يتصرف على تلك الأحداث.
الآن يمكن التعامل مع هذا بسهولة في إطار الزاوي باستخدام أربعة
أنواع مختلفة من تدفق المعلومات التي سوف نلخص في الشريحة التالية.
بالعودة إلى التفاعل بين المكون والقالب،
شهدنا بالفعل النوع الأول من التفاعل بين المكون
والقالب حيث كانت قيمة الخاصية تتدفق في القالب.
لذلك رأينا استخدام اسم الطبق،
وصف الطبق، تفاصيل تعليق الطبق وهلم
جرا يتم توفيرها من أجل تقديم المعلومات في القالب الخاص بك.
هذا هو المكان الذي كنا نستخدم فيه الأقواس المزدوجة لإحاطة حقيقة أن
قيمة من المكون الخاص بك يتم استخدامها في القالب الخاص بك.
نوع آخر من تدفق المعلومات التي ستراها هو المكان الذي
تحدد فيه نوع من الممتلكات المرتبطة بعلامة بين قوسين مربعين.
ثم قم بتعيينه لتكون القيمة من أحد الخصائص في المكون الخاص بك.
هذا النوع من النهج سنرى في التمرين الذي يتبع
مباشرة بعد هذه المحاضرة.
حتى هنا نود أن نحدد شيئا بين قوسين معقوفين.
لذا احترس
من مثال على ذلك في التمرين حيث سأناقش المزيد حول هذا الموضوع.
وبالمثل، إذا كان لديك حدث تم إنشاؤه بالقرب من DOM،
فقد يؤدي هذا الحدث إلى استدعاء معالج أو
طريقة في المكون الخاص بك الذي سيعتني بمعالجة هذا الحدث.
لذلك
يشار إلى الطرق التي سيتم استدعاؤها من قبل الأحداث من DOM الخاص بك على أنها معالجات.
لذا، فإن المقبض ليس شيئًا، كما قلت طريقة، والتي قد
يتم تمريرها أيضًا في بعض المعلمات داخل أساليب المعالج هناك.
في وقت لاحق، عندما ننظر إلى النماذج، سنرى ربط البيانات في اتجاهين.
لذلك كل الثلاثة التي رأيناها حتى الآن، تدفق القيمة من
المكون إلى القالب أو الخاصية التي يتم تعيينها إلى قيمة أو
الحدث الذي يتم تعيينه إلى معالج للتعامل مع الحدث.
كل هذه هي ما نشير إليه على أنه ربط البيانات بطريقة واحدة
لأنها تتدفق فقط في اتجاه واحد.
يمكنك أيضًا الحصول على تدفق ثنائي الاتجاه حيث قد تراه أيضًا
في بناء الجملة ما تحدده باستخدام أقواس مربعة.
ومن ثم محاطة داخل ذلك مع قوس قياسي.
داخل هناك سوف تحدد شيئا مثل نغموديل.
سترى استخدام هذا عندما يتشكل لاحقًا في الوحدة النمطية التالية.
لذلك هذا هو المكان الذي ستعين فيه خاصية لذلك.
لذلك في هذه الحالة تدفق المعلومات هو ثنائي الاتجاه.
لذلك سيتم عكس أي تغيير في DOM الخاص بك مرة أخرى في الممتلكات الخاصة بك
والمكون.
سيتم عكس أي تغيير في خاصية المكون مرة أخرى إلى DOM.
لاحظ بناء الجملة المحدد الذي نستخدمه
لتحديد ngModel في هذا المثال هنا.
نحن نستخدم قوس مربع وداخل ذلك نستخدم قوس القياسية في هناك.
اسمحوا لي الآن أن ألخص ما تعلمناه للتو
عن ربط البيانات في الشريحة السابقة في هذا الجدول.
لذلك في هذا الجدول، نحن نعرض الطرق المختلفة التي يتم استخدام ربط البيانات.
ربط البيانات أحادي الاتجاه من مصدر البيانات إلى هدف العرض، لذلك
من المكون إلى DOM،
نستخدم تعبيرًا مزدوجًا بالداخل هناك.
هذا ما نشير إليه باسم الاستيفاء كمثال على
ذلك, سيكون اسم الطبق, المغلقة داخل الأقواس المزدوجة كما رأينا,
المستخدمة في التدريبات, في الوحدة السابقة.
ثم لدينا، النوع الثاني حيث كنت أرفق الهدف
داخل قوس مربع ومن ثم تعيينه إلى تعبير على الجانب الأيمن.
قد تكون هذه التعبيرات تعبيرات جافا سكريبت مع بعض القيود.
الأمثلة التي سنراها عادة
ستستخدم خاصية من إحدى الفئات هناك.
لذا، هذا ما أشرنا إليه على أنه خاصية خاصية،
ومثال ستراه في التمرين الذي يتبع هذه المحاضرة.
حيث ترى استخدام طبق، مغلق داخل قوس مربع،
يتم مساواته إلى محدددديش، وهو متغير أعلن داخل مكون.
ويمكن أيضًا التعبير عن ذلك باستخدام هدف ربط،
طريقة للتعبير عن نفس الشيء.
لذلك كل من هذه سواء كنت أرفق هدفًا بين قوسين مربعين أو هدف ربط.
لذلك، على سبيل المثال، يمكنك أن ترى ربط طبق.
لذا أيًا كانت الطريقة التي تعبر بها عن هذا، فإن كلاهما يشير إلى نفس الشيء.
لذلك يتم تحديد سمة الخاصية أو نمط الفئة التي يتم تحديدها.
الآن يتم
التعبير عن تدفق المعلومات في اتجاه واحد من هدف العرض إلى مصدر البيانات عادة مع الهدف محاطة
بين قوسين هنا أو يمكن أيضا التعبير عنها على أنها على الهدف.
وعلى الجانب الأيمن سيكون بيان.
يمكن أن يكون البيان نوعًا من تعبير JavaScript عادة ما
يكون في استدعاء طريقة داخل مكون.
حسنا سترى مثالا في التمرين الذي يتبع حيث
كنت قد انقر داخل الأقواس وتعيين إلى onSelect.
وهي طريقة موصوفة داخل
فئة مكون هناك مع طبق معلمة يتم توفيره لهذه الطريقة هناك.
ربط البيانات ثنائي الاتجاه كما رأينا سيكون مع مربع وأقواس،
الأقواس المربعة والأقواس التي تساوي التعبير.
سنرى ربط البيانات ثنائي الاتجاه كمجموعة ذات نماذج في وقت لاحق قليلاً حيث
ستستخدم شيئًا مثل ngModel، محاطًا داخل الأقواس المربعة
والأقواس، مساويًا لشيء مثل dish.name.
الذي يربط عنصر النموذج إلى خاصية
كائن جافا سكريبت، في المكون لدينا.
يمكنك أيضًا التعبير عن هذا كـ bindon-target.
وهي طريقة أخرى لقول نفس الشيء
الآن، هذه البيانات ذات الاتجاهين الملزمة التي نقوم
بها يشار إليها أحيانا على أنها موزة في صندوق.
حتى إذا نظرتم إلى الأقواس المربعة مع الأقواس داخله،
فإنه يبدو وكأنه الموز في مربع.
لذلك، قد ترى هذا يتم استخدامه في بعض الوثائق أو
في بعض المدونات التي قد تقرأها على الإنترنت.
فالأهداف الملزمة التي شهدناها تتوسعا أكبر بشأن
الأهداف الملزمة التي شهدناها، هي الخصائص المعلنة على الجانب الأيسر
من الإعلان الملزم لذلك الإعلان الملزم للبيانات الملزم.
عادة، المغلقة داخل أقواس معقوفة أو داخل قوسين أو كليهما.
لذا فإن الجانب الأيمن من تعبير الربط هو مصادر الربط الخاصة بهم،
والتي عادة ما تكون مثل خصائص كائن جافا سكريبت، أو
متغير، أو تعبير نعرفه على الجانب الأيمن.
إذا قمت بتعريف خصائص الهدف المقترنة بانتقائية مكون.
هذه طريقة واحدة إما تمرير المعلومات إلى مكون،
أو إرسال المعلومات من مكون واحد إلى مكون آخر.
لذلك هذا يسهل التواصل بين المكونات.
لذلك سترى استخدام ديكور مثل @Input مقترن
بطريقة لإرسال المعلومات من مكون واحد إلى مكون آخر.
سنرى مثالا على هذا الاستخدام في التمرين
الذي يتبع هذه المحاضرة هنا.
وبالمثل، يمكنك استخدام ديكور الإخراج لتحديد حدث
من مكون واحد يتم تمريره مرة أخرى إلى مكون آخر.
لذلك يتم استخدام كل من هذه الاستخدامات بشكل فعال للتواصل بين المكونات.
[ موسيقى]