1
00:00:04,010 --> 00:00:09,440
قبل أن نبدأ في النماذج المدفوعة بالقالب الزاوي،

2
00:00:09,440 --> 00:00:15,165
نحتاج إلى العثور على طريقة لتراكب المحتوى أعلى عرض الويب الحالي.

3
00:00:15,165 --> 00:00:21,935
في Bootstrap، لدينا نماذج تمكننا من تراكب المحتوى أعلى صفحة ويب.

4
00:00:21,935 --> 00:00:26,700
مع استخدام المواد الزاوي في تطبيقنا الزاوي،

5
00:00:26,700 --> 00:00:29,970
توفر المادة الزاوي مكونًا يسمى

6
00:00:29,970 --> 00:00:32,820
مكون الحوار الزاوي الذي

7
00:00:32,820 --> 00:00:35,865
يسمح لك بتراكب المحتوى فوق العرض الحالي.

8
00:00:35,865 --> 00:00:42,010
دعونا ننظر في كيفية الاستفادة من عنصر الحوار في هذه العملية.

9
00:00:42,080 --> 00:00:45,470
للبدء في هذا التمرين،

10
00:00:45,470 --> 00:00:49,580
دعونا نذهب إلى رمزنا ونحن بحاجة إلى العثور على

11
00:00:49,580 --> 00:00:54,230
طريقة لتشغيل التطبيق لإظهار الحوار.

12
00:00:54,230 --> 00:00:58,620
لذلك، للقيام بذلك، دعونا نضيف زر في شريط الأدوات لدينا هنا.

13
00:00:58,620 --> 00:01:01,475
لذلك، والذهاب إلى شريط الأدوات الحق في الجزء العلوي هنا،

14
00:01:01,475 --> 00:01:10,790
اسمحوا لي أن أضيف في فترة مع فاصل المرن الطبقة التي

15
00:01:10,790 --> 00:01:18,340
قدمناها في

16
00:01:18,340 --> 00:01:21,650
ملف SCSS لدينا لتطبيقنا.

17
00:01:21,650 --> 00:01:29,170
لذلك، قدمنا فاصل flexor في ملف.scss styles.scss

18
00:01:29,170 --> 00:01:30,840
هنا، أسفل هنا.

19
00:01:30,840 --> 00:01:34,240
لذا، هذا هو الفصل الذي سنستخدمه مع فترة هنا.

20
00:01:34,240 --> 00:01:37,035
لذلك، عند تطبيق فاصل المثنية على الامتداد،

21
00:01:37,035 --> 00:01:40,670
ما يفعله هو أنه يوفر مساحة كافية بين

22
00:01:40,670 --> 00:01:45,670
العنصر السابق والعنصر الذي يلي هنا.

23
00:01:45,670 --> 00:01:49,280
لذا، سيدفع أي عنصر يتبع الامتداد إلى

24
00:01:49,280 --> 00:01:53,030
الحافة اليمنى للشاشة إلى أقصى حد ممكن.

25
00:01:53,030 --> 00:01:54,985
لذلك، هنا، بعد هذا،

26
00:01:54,985 --> 00:01:57,500
اسمحوا لي أن أضيف في زر هنا.

27
00:01:57,500 --> 00:02:02,755
لذا، فإن هذا الزر الذي عند النقر عليه

28
00:02:02,755 --> 00:02:09,635
سيستدعي وظيفة تسمى OpenLogInforms.

29
00:02:09,635 --> 00:02:11,660
لذلك، كما تدركون،

30
00:02:11,660 --> 00:02:17,865
لذلك هذا هو المكان الذي سندعم فيه نموذج لطلبنا.

31
00:02:17,865 --> 00:02:22,475
سننظر في كيفية تطوير النموذج في التمرين التالي.

32
00:02:22,475 --> 00:02:25,330
الآن، لهذا، اسمحوا لي أن أضيف

33
00:02:25,330 --> 00:02:33,120
في الخط المقابل الرموز رهيبة.

34
00:02:33,120 --> 00:02:38,950
لذلك، سأقول فا فا تسجيل الدخول,

35
00:02:42,290 --> 00:02:50,010
وأيضا إضافة في فا إل جي لذلك.

36
00:02:50,010 --> 00:02:52,875
لذلك، من شأنها أن تضيف في رمز،

37
00:02:52,875 --> 00:02:54,645
رمز تسجيل الدخول هنا،

38
00:02:54,645 --> 00:02:55,880
وبعد ذلك،

39
00:02:55,880 --> 00:02:58,690
سوف نضع كلمة تسجيل الدخول في هناك.

40
00:02:58,690 --> 00:03:05,980
لذلك، سيؤدي ذلك إلى إنشاء زر يسمى تسجيل الدخول في شريط الأدوات

41
00:03:05,980 --> 00:03:14,070
إلى الحافة اليمنى من الشاشة مع رمز تسجيل الدخول هناك،

42
00:03:14,070 --> 00:03:16,960
والذي عند النقر عليه، سيفتح نموذج تسجيل الدخول.

43
00:03:16,960 --> 00:03:22,670
سيتم استضافة نموذج تسجيل الدخول هذا في حد ذاته داخل مكون حوار مادي.

44
00:03:22,670 --> 00:03:26,204
الآن، لإنشاء عنصر حوار، من الواضح

45
00:03:26,204 --> 00:03:29,330
أننا ندرك أن ذلك سيكون مكونًا

46
00:03:29,330 --> 00:03:32,270
يحتاج إلى مضافاته على رأس وجهة النظر الحالية هناك.

47
00:03:32,270 --> 00:03:36,770
لذلك، نحن بحاجة إلى مكون آخر ليتم إضافته إلى طلبنا.

48
00:03:36,770 --> 00:03:44,095
لذلك، دعونا نذهب إلى محطة ومن ثم إضافة في عنصر واحد أكثر في التطبيق لدينا.

49
00:03:44,095 --> 00:03:50,735
الذهاب إلى المحطة، اسمحوا لي أن اكتب ng g تسجيل الدخول المكون.

50
00:03:50,735 --> 00:03:55,725
لذلك، أضفنا مكونًا جديدًا يسمى مكون تسجيل الدخول إلى تطبيقنا.

51
00:03:55,725 --> 00:03:57,725
بمجرد إضافة مكون تسجيل الدخول،

52
00:03:57,725 --> 00:04:04,490
دعنا نذهب وتكوين مكون تسجيل الدخول ليكون مكون الحوار في تطبيقنا.

53
00:04:04,490 --> 00:04:08,305
لذلك، للقيام بذلك، دعونا نعود إلى رمزنا.

54
00:04:08,305 --> 00:04:10,215
بالعودة إلى شفرتنا،

55
00:04:10,215 --> 00:04:13,715
نرى الآن أن مكون تسجيل الدخول مفتوح الآن.

56
00:04:13,715 --> 00:04:16,445
اسمحوا لي أن فتح ملف.ts component.ts تسجيل الدخول.

57
00:04:16,445 --> 00:04:18,935
لذلك، قم بتكوين هذا

58
00:04:18,935 --> 00:04:24,485
كمكون حوار في تطبيق Angular باستخدام مكون الحوار المادي.

59
00:04:24,485 --> 00:04:30,385
اسمحوا لي استيراد ماديالوغ.

60
00:04:30,385 --> 00:04:32,540
لذا، هذا هو المكون الذي يدعم

61
00:04:32,540 --> 00:04:39,480
مكون الحوار في المادة الزاوي ثم

62
00:04:39,600 --> 00:04:45,545
اسمحوا لي أيضًا باستيراد MatDialogref ويتم استيرادها

63
00:04:45,545 --> 00:04:52,420
من المواد الزاوي هنا. و

64
00:04:53,140 --> 00:05:03,750
سيمكننا ذلك من إنشاء عنصرنا و تحويل ذلك إلى عنصر لل حوار.

65
00:05:03,750 --> 00:05:10,030
الآن، بعد هذا، دعونا المضي قدما ومن ثم تكوين ملف القالب لدينا هنا.

66
00:05:10,030 --> 00:05:11,940
لذا، بالانتقال إلى ملف القالب هنا،

67
00:05:11,940 --> 00:05:16,300
سأقوم بإنشاء هذا على أنه شريط أدوات الحصيرة.

68
00:05:16,300 --> 00:05:22,330
لذلك، في إطار هذا الحوار أيضا الذهاب لعرض شريط الأدوات.

69
00:05:25,350 --> 00:05:34,065
لشريط الأدوات هذا، سأقول تسجيل الدخول مباشرة في الجزء العلوي، وبعد ذلك،

70
00:05:34,065 --> 00:05:43,920
سوف نقدم فئة فاصل المرن

71
00:05:43,920 --> 00:05:49,350
هنا وبعد ذلك بعد فئة الفاصل المرن،

72
00:05:49,350 --> 00:05:53,169
وسوف نضيف في زر

73
00:05:54,590 --> 00:06:04,385
مع سمات حصيرة زر الحصيرة الحوار إغلاق.

74
00:06:04,385 --> 00:06:09,850
لذا، فإن هذا الحوار الحوار هو شيء تدعمه مكونات الحوار بالنسبة لنا،

75
00:06:09,850 --> 00:06:13,490
وهذه السمة التي تحول هذا الزر إلى

76
00:06:13,490 --> 00:06:18,255
زر الذي عند النقر عليه سيتم إغلاق هذا الحوار هناك.

77
00:06:18,255 --> 00:06:26,740
داخل هذا الزر، أنا ذاهب لاستخدام مرات في هناك.

78
00:06:26,740 --> 00:06:30,600
لذلك، سوف يعرض ذلك كصليب على الشاشة هناك.

79
00:06:30,600 --> 00:06:33,110
لذلك، هذا هو الزر الذي سنضيفه إلى الحوار.

80
00:06:33,110 --> 00:06:38,855
وفي الوقت الراهن, فإن حوارنا لا يتضمن إلا هذا في رأيه.

81
00:06:38,855 --> 00:06:44,870
الآن، لتمكيننا من تضمين عنصر الحوار والاستفادة منه،

82
00:06:44,870 --> 00:06:47,350
بطبيعة الحال، نحن بحاجة للذهاب إلى وحدة التطبيق.

83
00:06:47,350 --> 00:06:49,030
في وحدة التطبيق،

84
00:06:49,030 --> 00:06:59,190
نحتاج إلى استيراد الوحدة النمطية المقابلة التي تدعم مكون الحوار.

85
00:06:59,190 --> 00:07:02,765
لذلك، سنقوم باستيراد MatDialogueModule

86
00:07:02,765 --> 00:07:10,200
من مربع حوار المواد الزاوي.

87
00:07:10,200 --> 00:07:20,300
لذلك، سيضيف هذا في وحدة الحوار في تطبيقنا وبعد ذلك كما تتوقع،

88
00:07:20,300 --> 00:07:25,070
سيكون عليهم النزول هنا إلى الواردات ثم

89
00:07:25,070 --> 00:07:30,515
استيراد وحدة الحوار هذه في تطبيقنا.

90
00:07:30,515 --> 00:07:32,735
ليس هذا فقط، الآن،

91
00:07:32,735 --> 00:07:38,575
من أجل تحويل مكون Angular إلى مكون حوار،

92
00:07:38,575 --> 00:07:44,330
نحتاج أيضًا إلى إعلان هذا المكون كمكون إدخال.

93
00:07:44,330 --> 00:07:49,310
الآن، تذكر أننا أضفنا في مكون تسجيل الدخول إلى التطبيق الخاص بنا، وبالتالي

94
00:07:49,310 --> 00:07:51,920
يتم إضافة عنصر تسجيل الدخول هذا بالفعل هناك ومن

95
00:07:51,920 --> 00:07:54,845
ثم تضمينها أيضا في الإعلانات.

96
00:07:54,845 --> 00:08:02,255
الآن، إذا كنت ترغب في استخدام ذلك كتراكب مع مكون الحوار المادي،

97
00:08:02,255 --> 00:08:08,285
نحتاج أيضًا إلى تضمين ذلك في خاصية أخرى تسمى

98
00:08:08,285 --> 00:08:17,460
مكونات الإدخال في مصمم وحدة ng الخاص بنا هنا.

99
00:08:17,460 --> 00:08:19,715
لذلك، داخل مكونات الإدخال هذه،

100
00:08:19,715 --> 00:08:23,810
أحتاج أيضًا إلى تضمين مكون تسجيل الدخول هنا.

101
00:08:23,810 --> 00:08:26,000
الآن، سيمكننا هذا

102
00:08:26,000 --> 00:08:30,235
من استخدام مكون تسجيل الدخول كتراكب أعلى الشاشة الحالية.

103
00:08:30,235 --> 00:08:35,330
لذلك، بمجرد أن نقوم بتحديث مكون المادة الزاوي،

104
00:08:35,330 --> 00:08:39,370
الآن، نحتاج إلى أن نكون قادرين على تشغيل مكون تسجيل الدخول هذا.

105
00:08:39,370 --> 00:08:42,530
الآن، أضفنا في الزر إلى

106
00:08:42,530 --> 00:08:47,240
مكون الرأس ثم هنا لدينا هذه الوظيفة تسمى نموذج تسجيل الدخول المفتوح.

107
00:08:47,240 --> 00:08:51,770
لذلك، يجب أن يؤدي هذا إلى إظهار الحوار.

108
00:08:51,770 --> 00:08:56,350
لذلك، الذهاب إلى ملف component.ts رأس،

109
00:08:57,410 --> 00:09:04,350
للاستفادة من مكون الحوار حصيرة في مكون رأس،

110
00:09:04,350 --> 00:09:12,420
اسمحوا لي استيراد MatDialog ثم

111
00:09:12,420 --> 00:09:22,605
MatDialogref من المواد الزاوي.

112
00:09:22,605 --> 00:09:26,745
داخل هذه الوظيفة، في منشئ،

113
00:09:26,745 --> 00:09:28,575
اسمحوا لي أن حقن

114
00:09:28,575 --> 00:09:37,365
الحوار كما MatDialog.

115
00:09:37,365 --> 00:09:43,680
لذا، هذه خدمة تمكننا من فتح المكون كمكون حوار.

116
00:09:43,680 --> 00:09:45,615
الآن، كيف يعمل هذا؟

117
00:09:45,615 --> 00:09:50,039
لذلك، هنا، نحن بحاجة إلى إضافة في هذه الوظيفة تسمى OpenLogInform،

118
00:09:52,090 --> 00:09:57,610
والتي عند استدعاؤها يجب أن تؤدي إلى إظهار عنصر الحوار.

119
00:09:57,610 --> 00:10:00,894
لذلك، لهذا، سوف نقول، هذا الحوار،

120
00:10:00,894 --> 00:10:03,860
وهذا الحوار يدعم وظيفة تسمى

121
00:10:03,860 --> 00:10:09,395
مفتوحة التي نحن توريد المكون الذي سيكون

122
00:10:09,395 --> 00:10:18,170
بمثابة وجهة نظر للحوار الذي هو مضافين على رأس عرض الويب الحالي.

123
00:10:18,170 --> 00:10:22,415
لذلك، هنا، كما ندرك،

124
00:10:22,415 --> 00:10:28,475
أعلنا مكون تسجيل الدخول كمكون الحوار.

125
00:10:28,475 --> 00:10:33,740
لذلك، سنقوم باستدعاء مكون تسجيل الدخول

126
00:10:33,740 --> 00:10:39,670
ثم سنقوم أيضًا بتحديد حجم مربع الحوار.

127
00:10:39,670 --> 00:10:40,910
إذا كنت تريد ذلك،

128
00:10:40,910 --> 00:10:44,089
يمكنك السماح بالحجم الافتراضي ليتم عرضه،

129
00:10:44,089 --> 00:10:47,610
ولكن يمكنك أيضًا تكوين الحجم بشكل صريح إذا كنت تريد.

130
00:10:47,610 --> 00:10:48,620
لذلك، في هذه الحالة،

131
00:10:48,620 --> 00:10:57,960
اسمحوا لي تكوين العرض وارتفاع هذا الحوار.

132
00:11:02,370 --> 00:11:05,960
ليس عليك بالضرورة القيام بذلك، إذا لم تقم بذلك،

133
00:11:05,960 --> 00:11:11,990
فسيتم عرض الحوار بالحجم الافتراضي القياسي هنا.

134
00:11:11,990 --> 00:11:16,550
لذلك، مع هذا،

135
00:11:16,550 --> 00:11:20,490
يتم تكوين مكون الرأس الخاص بي الآن بحيث عندما يتم استدعاء نموذج تسجيل الدخول المفتوح،

136
00:11:20,490 --> 00:11:23,765
فإن هذا سيمكننا من فتح

137
00:11:23,765 --> 00:11:28,835
مكون تسجيل الدخول كحوار ثم إظهاره فوق السلسلة الحالية.

138
00:11:28,835 --> 00:11:32,090
لذلك، دعونا حفظ جميع التغييرات ومن ثم الذهاب

139
00:11:32,090 --> 00:11:35,605
ونلقي نظرة على التطبيق لدينا في المتصفح.

140
00:11:35,605 --> 00:11:40,310
الذهاب إلى المتصفح، سترى الآن أنه في الحافة اليمنى من الشاشة،

141
00:11:40,310 --> 00:11:43,010
لدينا زر جديد آخر يسمى زر تسجيل الدخول،

142
00:11:43,010 --> 00:11:47,085
ونرى أن تسجيل الدخول إلى الخط رمز رهيبة المضافة إلى ذلك.

143
00:11:47,085 --> 00:11:49,560
الآن، عند النقر على زر تسجيل الدخول،

144
00:11:49,560 --> 00:11:53,995
سترى على الفور مربع حوار منبثق على الشاشة.

145
00:11:53,995 --> 00:11:58,610
مرة أخرى، يمكنك رفض ذلك عن طريق النقر في أي مكان على الشاشة خارج

146
00:11:58,610 --> 00:12:03,225
مربع الحوار أو النقر على ذلك ثم الحوار للملوثات العضوية الثابتة على الشاشة.

147
00:12:03,225 --> 00:12:06,840
لذلك، من Bootstrap، كنت قد رأيت مشروط في Bootstrap.

148
00:12:06,840 --> 00:12:10,485
لذلك، هذا هو بالضبط مثل مشروط من Bootstrap.

149
00:12:10,485 --> 00:12:13,645
لذلك، هنا، لدينا الحوار الذي للملوثات العضوية الثابتة على الشاشة.

150
00:12:13,645 --> 00:12:17,720
الآن، لدينا مساحة على مربع الحوار حيث يمكننا الآن وضع

151
00:12:17,720 --> 00:12:22,790
المحتوى الذي نحتاج إلى عرضه عند استدعاء هذا الحوار.

152
00:12:22,790 --> 00:12:26,120
لاحظ أيضًا زر الاستبعاد هذا هنا.

153
00:12:26,120 --> 00:12:27,260
لذلك، عند النقر على ذلك،

154
00:12:27,260 --> 00:12:29,030
يتم رفض الحوار أيضا.

155
00:12:29,030 --> 00:12:31,535
الآن، عند النقر فوق أي مكان في مربع الحوار،

156
00:12:31,535 --> 00:12:36,320
لا يحدث شيء، ولكن عند النقر فوق هذا الزر، يتم رفض الحوار.

157
00:12:36,320 --> 00:12:43,340
لذا، هذه هي الطريقة التي يعمل بها مكون الحوار من مادة Angular في تطبيقنا.

158
00:12:43,340 --> 00:12:50,005
الخطوة التالية هي إضافة نموذج تسجيل الدخول إلى مربع الحوار هذا.

159
00:12:50,005 --> 00:12:53,365
مع هذا، نكمل هذا التمرين.

160
00:12:53,365 --> 00:12:58,250
في هذا التمرين، رأيت كيف يمكننا الاستفادة من مربع حوار المواد

161
00:12:58,250 --> 00:13:04,575
الزاوي لإضافة تراكب إلى تطبيقنا ومن ثم إظهاره فوق العرض الحالي.

162
00:13:04,575 --> 00:13:07,610
سنضيف في النموذج إلى هذا.

163
00:13:07,610 --> 00:13:13,770
هذا هو الوقت المناسب بالنسبة لك للقيام جيت الالتزام مع مربعات حوار الرسالة.