قبل أن نبدأ في النماذج المدفوعة بالقالب الزاوي،
نحتاج إلى العثور على طريقة لتراكب المحتوى أعلى عرض الويب الحالي.
في Bootstrap، لدينا نماذج تمكننا من تراكب المحتوى أعلى صفحة ويب.
مع استخدام المواد الزاوي في تطبيقنا الزاوي،
توفر المادة الزاوي مكونًا يسمى
مكون الحوار الزاوي الذي
يسمح لك بتراكب المحتوى فوق العرض الحالي.
دعونا ننظر في كيفية الاستفادة من عنصر الحوار في هذه العملية.
للبدء في هذا التمرين،
دعونا نذهب إلى رمزنا ونحن بحاجة إلى العثور على
طريقة لتشغيل التطبيق لإظهار الحوار.
لذلك، للقيام بذلك، دعونا نضيف زر في شريط الأدوات لدينا هنا.
لذلك، والذهاب إلى شريط الأدوات الحق في الجزء العلوي هنا،
اسمحوا لي أن أضيف في فترة مع فاصل المرن الطبقة التي
قدمناها في
ملف SCSS لدينا لتطبيقنا.
لذلك، قدمنا فاصل flexor في ملف.scss styles.scss
هنا، أسفل هنا.
لذا، هذا هو الفصل الذي سنستخدمه مع فترة هنا.
لذلك، عند تطبيق فاصل المثنية على الامتداد،
ما يفعله هو أنه يوفر مساحة كافية بين
العنصر السابق والعنصر الذي يلي هنا.
لذا، سيدفع أي عنصر يتبع الامتداد إلى
الحافة اليمنى للشاشة إلى أقصى حد ممكن.
لذلك، هنا، بعد هذا،
اسمحوا لي أن أضيف في زر هنا.
لذا، فإن هذا الزر الذي عند النقر عليه
سيستدعي وظيفة تسمى OpenLogInforms.
لذلك، كما تدركون،
لذلك هذا هو المكان الذي سندعم فيه نموذج لطلبنا.
سننظر في كيفية تطوير النموذج في التمرين التالي.
الآن، لهذا، اسمحوا لي أن أضيف
في الخط المقابل الرموز رهيبة.
لذلك، سأقول فا فا تسجيل الدخول,
وأيضا إضافة في فا إل جي لذلك.
لذلك، من شأنها أن تضيف في رمز،
رمز تسجيل الدخول هنا،
وبعد ذلك،
سوف نضع كلمة تسجيل الدخول في هناك.
لذلك، سيؤدي ذلك إلى إنشاء زر يسمى تسجيل الدخول في شريط الأدوات
إلى الحافة اليمنى من الشاشة مع رمز تسجيل الدخول هناك،
والذي عند النقر عليه، سيفتح نموذج تسجيل الدخول.
سيتم استضافة نموذج تسجيل الدخول هذا في حد ذاته داخل مكون حوار مادي.
الآن، لإنشاء عنصر حوار، من الواضح
أننا ندرك أن ذلك سيكون مكونًا
يحتاج إلى مضافاته على رأس وجهة النظر الحالية هناك.
لذلك، نحن بحاجة إلى مكون آخر ليتم إضافته إلى طلبنا.
لذلك، دعونا نذهب إلى محطة ومن ثم إضافة في عنصر واحد أكثر في التطبيق لدينا.
الذهاب إلى المحطة، اسمحوا لي أن اكتب ng g تسجيل الدخول المكون.
لذلك، أضفنا مكونًا جديدًا يسمى مكون تسجيل الدخول إلى تطبيقنا.
بمجرد إضافة مكون تسجيل الدخول،
دعنا نذهب وتكوين مكون تسجيل الدخول ليكون مكون الحوار في تطبيقنا.
لذلك، للقيام بذلك، دعونا نعود إلى رمزنا.
بالعودة إلى شفرتنا،
نرى الآن أن مكون تسجيل الدخول مفتوح الآن.
اسمحوا لي أن فتح ملف.ts component.ts تسجيل الدخول.
لذلك، قم بتكوين هذا
كمكون حوار في تطبيق Angular باستخدام مكون الحوار المادي.
اسمحوا لي استيراد ماديالوغ.
لذا، هذا هو المكون الذي يدعم
مكون الحوار في المادة الزاوي ثم
اسمحوا لي أيضًا باستيراد MatDialogref ويتم استيرادها
من المواد الزاوي هنا. و
سيمكننا ذلك من إنشاء عنصرنا و تحويل ذلك إلى عنصر لل حوار.
الآن، بعد هذا، دعونا المضي قدما ومن ثم تكوين ملف القالب لدينا هنا.
لذا، بالانتقال إلى ملف القالب هنا،
سأقوم بإنشاء هذا على أنه شريط أدوات الحصيرة.
لذلك، في إطار هذا الحوار أيضا الذهاب لعرض شريط الأدوات.
لشريط الأدوات هذا، سأقول تسجيل الدخول مباشرة في الجزء العلوي، وبعد ذلك،
سوف نقدم فئة فاصل المرن
هنا وبعد ذلك بعد فئة الفاصل المرن،
وسوف نضيف في زر
مع سمات حصيرة زر الحصيرة الحوار إغلاق.
لذا، فإن هذا الحوار الحوار هو شيء تدعمه مكونات الحوار بالنسبة لنا،
وهذه السمة التي تحول هذا الزر إلى
زر الذي عند النقر عليه سيتم إغلاق هذا الحوار هناك.
داخل هذا الزر، أنا ذاهب لاستخدام مرات في هناك.
لذلك، سوف يعرض ذلك كصليب على الشاشة هناك.
لذلك، هذا هو الزر الذي سنضيفه إلى الحوار.
وفي الوقت الراهن, فإن حوارنا لا يتضمن إلا هذا في رأيه.
الآن، لتمكيننا من تضمين عنصر الحوار والاستفادة منه،
بطبيعة الحال، نحن بحاجة للذهاب إلى وحدة التطبيق.
في وحدة التطبيق،
نحتاج إلى استيراد الوحدة النمطية المقابلة التي تدعم مكون الحوار.
لذلك، سنقوم باستيراد MatDialogueModule
من مربع حوار المواد الزاوي.
لذلك، سيضيف هذا في وحدة الحوار في تطبيقنا وبعد ذلك كما تتوقع،
سيكون عليهم النزول هنا إلى الواردات ثم
استيراد وحدة الحوار هذه في تطبيقنا.
ليس هذا فقط، الآن،
من أجل تحويل مكون Angular إلى مكون حوار،
نحتاج أيضًا إلى إعلان هذا المكون كمكون إدخال.
الآن، تذكر أننا أضفنا في مكون تسجيل الدخول إلى التطبيق الخاص بنا، وبالتالي
يتم إضافة عنصر تسجيل الدخول هذا بالفعل هناك ومن
ثم تضمينها أيضا في الإعلانات.
الآن، إذا كنت ترغب في استخدام ذلك كتراكب مع مكون الحوار المادي،
نحتاج أيضًا إلى تضمين ذلك في خاصية أخرى تسمى
مكونات الإدخال في مصمم وحدة ng الخاص بنا هنا.
لذلك، داخل مكونات الإدخال هذه،
أحتاج أيضًا إلى تضمين مكون تسجيل الدخول هنا.
الآن، سيمكننا هذا
من استخدام مكون تسجيل الدخول كتراكب أعلى الشاشة الحالية.
لذلك، بمجرد أن نقوم بتحديث مكون المادة الزاوي،
الآن، نحتاج إلى أن نكون قادرين على تشغيل مكون تسجيل الدخول هذا.
الآن، أضفنا في الزر إلى
مكون الرأس ثم هنا لدينا هذه الوظيفة تسمى نموذج تسجيل الدخول المفتوح.
لذلك، يجب أن يؤدي هذا إلى إظهار الحوار.
لذلك، الذهاب إلى ملف component.ts رأس،
للاستفادة من مكون الحوار حصيرة في مكون رأس،
اسمحوا لي استيراد MatDialog ثم
MatDialogref من المواد الزاوي.
داخل هذه الوظيفة، في منشئ،
اسمحوا لي أن حقن
الحوار كما MatDialog.
لذا، هذه خدمة تمكننا من فتح المكون كمكون حوار.
الآن، كيف يعمل هذا؟
لذلك، هنا، نحن بحاجة إلى إضافة في هذه الوظيفة تسمى OpenLogInform،
والتي عند استدعاؤها يجب أن تؤدي إلى إظهار عنصر الحوار.
لذلك، لهذا، سوف نقول، هذا الحوار،
وهذا الحوار يدعم وظيفة تسمى
مفتوحة التي نحن توريد المكون الذي سيكون
بمثابة وجهة نظر للحوار الذي هو مضافين على رأس عرض الويب الحالي.
لذلك، هنا، كما ندرك،
أعلنا مكون تسجيل الدخول كمكون الحوار.
لذلك، سنقوم باستدعاء مكون تسجيل الدخول
ثم سنقوم أيضًا بتحديد حجم مربع الحوار.
إذا كنت تريد ذلك،
يمكنك السماح بالحجم الافتراضي ليتم عرضه،
ولكن يمكنك أيضًا تكوين الحجم بشكل صريح إذا كنت تريد.
لذلك، في هذه الحالة،
اسمحوا لي تكوين العرض وارتفاع هذا الحوار.
ليس عليك بالضرورة القيام بذلك، إذا لم تقم بذلك،
فسيتم عرض الحوار بالحجم الافتراضي القياسي هنا.
لذلك، مع هذا،
يتم تكوين مكون الرأس الخاص بي الآن بحيث عندما يتم استدعاء نموذج تسجيل الدخول المفتوح،
فإن هذا سيمكننا من فتح
مكون تسجيل الدخول كحوار ثم إظهاره فوق السلسلة الحالية.
لذلك، دعونا حفظ جميع التغييرات ومن ثم الذهاب
ونلقي نظرة على التطبيق لدينا في المتصفح.
الذهاب إلى المتصفح، سترى الآن أنه في الحافة اليمنى من الشاشة،
لدينا زر جديد آخر يسمى زر تسجيل الدخول،
ونرى أن تسجيل الدخول إلى الخط رمز رهيبة المضافة إلى ذلك.
الآن، عند النقر على زر تسجيل الدخول،
سترى على الفور مربع حوار منبثق على الشاشة.
مرة أخرى، يمكنك رفض ذلك عن طريق النقر في أي مكان على الشاشة خارج
مربع الحوار أو النقر على ذلك ثم الحوار للملوثات العضوية الثابتة على الشاشة.
لذلك، من Bootstrap، كنت قد رأيت مشروط في Bootstrap.
لذلك، هذا هو بالضبط مثل مشروط من Bootstrap.
لذلك، هنا، لدينا الحوار الذي للملوثات العضوية الثابتة على الشاشة.
الآن، لدينا مساحة على مربع الحوار حيث يمكننا الآن وضع
المحتوى الذي نحتاج إلى عرضه عند استدعاء هذا الحوار.
لاحظ أيضًا زر الاستبعاد هذا هنا.
لذلك، عند النقر على ذلك،
يتم رفض الحوار أيضا.
الآن، عند النقر فوق أي مكان في مربع الحوار،
لا يحدث شيء، ولكن عند النقر فوق هذا الزر، يتم رفض الحوار.
لذا، هذه هي الطريقة التي يعمل بها مكون الحوار من مادة Angular في تطبيقنا.
الخطوة التالية هي إضافة نموذج تسجيل الدخول إلى مربع الحوار هذا.
مع هذا، نكمل هذا التمرين.
في هذا التمرين، رأيت كيف يمكننا الاستفادة من مربع حوار المواد
الزاوي لإضافة تراكب إلى تطبيقنا ومن ثم إظهاره فوق العرض الحالي.
سنضيف في النموذج إلى هذا.
هذا هو الوقت المناسب بالنسبة لك للقيام جيت الالتزام مع مربعات حوار الرسالة.