ما هو النطاق المعزول في Angular8؟

إذا كنت تستخدم لبعض الوقت الآن ، ربما سمعت عن ميزة النطاق. إنها وحدة نمطية مضمنة في Angular8 وقد نشأت من Parent Scope الافتراضي. ولكن في معظم الأحيان ، لا يكون ذلك مطلوبًا في تطوير المكونات المشتركة وهذا هو سبب ظهور النطاق المعزول في الصورة. في هذه المقالة ، سنناقش كل شيء عن النطاق المعزول في Angular8 بالترتيب التالي:

• ما هو النطاق المعزول في Angular8؟
• أمثلة
• وظيفة Foreach في Angular8

هيا نبدأ.

ما هو النطاق المعزول في Angular8؟

النطاق المعزول في Angular8 لم يتم اشتقاقه نموذجيًا من النطاق الأصلي ، ولكنه يقوم بميزة الوصول إلى النطاق الأصلي من خلال $ parent. يحتوي توجيه النطاق المعزول في Python على ثلاث خصائص أساسية ، كما هو موضح أدناه.

1. النطاق: خطأ: يتم استخدام هذا التوجيه افتراضيًا في نطاق منفصل ويستخدم بشكل أساسي لإعادة استخدام النطاق من المكون الذي يتم استخدامه حاليًا فيه.

2. النطاق: صحيح: يتم استخدام هذا التوجيه لإنشاء نطاق فرعي ويرث النطاق الأصلي بشكل أولي.

3. نطاق: {…}: يستخدم هذا لإنشاء النطاق المعزول وهذا نموذجي من النطاق الأصلي.

   
   
   

لفهم التوجيهات المذكورة أعلاه بشكل أفضل ، ألق نظرة على التفسيرات أدناه.

النطاق: صحيح

نطاق الوالدين<<======prototype====== Child Scope

<<====== $Parent ====== Child Scope

نطاق: {}

نطاق الوالدين<<=====$Parent Scope ========= Isolates Scope

نحن هنا بحاجة إلى استخدام ثلاثة أنواع من الواجهات بين النطاق المعزول والنطاق الأصلي.

1. ربط البيانات (=)

2. تحقق (@)

3. التعبير (&)

أمثلة

النطاق: {myValue1: '@ attribute1'، myValue2: '= attribute2'، myValue3: '& attribute3'}

أقحم أو سمات (@)

يستخدم هذا لربط النطاق المعزول بسمة DOM. يقوم هذا بشكل أساسي بإعداد توجيه أحادي الاتجاه ليتم استخدامه بين النطاق المعزول والنطاق الأصلي. ما يعنيه هذا هو أنه في حالة وجود أي تغييرات في النطاق الأصلي ، فسوف ينعكس نفس الشيء على الفور في النطاق المعزول أيضًا.

مثال

.directive ('myDirective'، function () {return {range: {myAttribute: '@'،}}})

الآن يمكننا الاستفادة من التوجيه لربط هذين الاثنين ببعضهما البعض.

التعبير (&)

يتم استخدام التعبير (&) لاستدعاء دالة من النطاق الأصلي إلى النطاق المعزول. يتم استخدامه بشكل أساسي لإنشاء مكالمات من بين وظائف أخرى.

مثال

.directive ('myDirective'، function () {return {range: {myIsolatedFunction: '&'}}})

الآن سوف نستخدم حكم

انقر فوق OK (موافق) ، ستقوم الطريقة الآن بإعادة الاتصال بوحدة التحكم بالطريقة التالية. .controller ('myTestController'، ['$ range'، function ($ range) {$ range.myUpdatedValue = function (myValue) {$ range.updatedValue = myValue}}])

ملزم (=)

يشبه الربط (=) السمات ، والفرق الوحيد هو أنه ينشئ قناة اتصال ثنائية الاتجاه بدلاً من قناة واحدة.

مثال

javascript تحقق من طول المصفوفة

.directive ('myDirective'، function () {return {range: {myBinding: '='،}}})

وظيفة Foreach في Angular8

الآن بعد أن تعرفت على المفهوم الأساسي للنطاق المعزول في Angular8 ، دعنا نستكشف وظيفة foreach أيضًا.

Foreach في Angular8

لتمكين وظيفة foreach في Angular8 ، اتبع الخطوات الموضحة أدناه.

الخطوة 1

ابدأ تشغيل Visual Editor 2012 وانتقل إلى Project ضمن New and File. عند فتح النافذة ، قم بتسمية الملف باسم Orforeach ثم انقر فوق الزر 'موافق'.

الخطوة 2

بمجرد اكتمال الخطوة 1 ، افتح مستكشف الحلول الذي يحتوي على ملف css وملف js وملف ts بالإضافة إلى ملف html.

الخطوه 3

الآن قم بتشغيل الكود التالي لوظيفة foreach.

forOrforeach.ts

الفئة A {function () {var array = [1، 2، 3، 4] لـ (var v in array) // لأعمال foreach {alert (array [v])}}} window.onload = () => {var call = new A () call.function ()}

Default.html

تطبيق TypeScript HTML

App.js

var A = (function () {function A () {} A.prototype.function = function () {var array = [1، 2، 3، 4] for (var v in array) {alert (array [v] )}} return A}) () window.onload = function () {var call = new A () call.function ()}

سيبدو الإخراج الخاص بالرموز أعلاه مثل هذا.

لكل في TypeScript

الآن دعونا نستكشف كيفية تنفيذ جملة foreach في TypeScript.

Newforeach.ts

الفئة أ {no: number [] = [1، 2، 3] lognumber () {this.no.forEach ((nos) => {// foreach statement document.write ('number =:' + nos)}) }} window.onload = () => {var call = new A () call.lognumber ()}

ناتج ما سبق سيكون ،

الآن بعد أن عرفت كيفية استخدام كل من وحدات النطاق المعزولة و foreach ، نأمل أن تستفيد منها في ترميز Angular8 اليومي الخاص بك لجعله أكثر كفاءة.تعرف على الأساسيات وكذلك استخدامات كل من foreach وكذلك النطاق المعزول في Angular8.

يقودنا هذا إلى نهاية مدونة Angular Tutorial. آمل أن تكون هذه المدونة مفيدة وقيمة مضافة لك. الآن ، يجب أن تكون واضحًا بشأن اللبنات الأساسية لـ Angular وجاهزًا لإنشاء تطبيق Angular. أود أن أوصيك بالمرور من خلال هذا دروس الزاوي قائمة تشغيل الفيديو Edureka لمشاهدة مقاطع الفيديو ومعرفة كيفية إنشاء تطبيق Angular.

تفحص ال من Edureka ، وهي شركة تعليمية موثوقة عبر الإنترنت مع شبكة تضم أكثر من 250000 متعلم راضٍ منتشرين في جميع أنحاء العالم. Angular هو إطار عمل JavaScript يُستخدم لإنشاء تطبيقات ويب قابلة للتطوير ومؤسسة وأداء من جانب العميل. مع اعتماد إطار العمل الزاوي عاليًا ، فإن إدارة أداء التطبيق مدفوعة من المجتمع بشكل غير مباشر يقود فرص عمل أفضل. يهدف تدريب الشهادة الزاوي إلى تغطية كل هذه المفاهيم الجديدة حول تطوير تطبيقات المؤسسة.