Mi az elszigetelt hatókör az Angular8-ban?

Ebben a cikkben mindent megtudhat az Angular8 elszigetelt hatóköréről, példákkal együtt. Az Angular8 foreach funkcióját is meg fogja érteni.

Ha már használta egy ideje valószínűleg hallott a hatókörről. Ez egy beépített modul az Angular8-ban, és a szülői hatókör alapértelmezett értékéből származik. De legtöbbször nem szükséges a közös alkatrészek fejlesztésénél, és így került a képbe az elszigetelt hatókör. Ebben a cikkben a következő sorrendben tárgyalunk mindent az Angular8 izolált hatóköréről:



Kezdjük.



Mi az elszigetelt hatókör az Angular8-ban?

Az Angular8 izolált hatóköre nem prototípusosan származik a szülő hatóköréből, de megteszi azt a funkciót, hogy a szülő hatóköréhez hozzáférjen a $ parent segítségével. A Python izolált hatókörű irányelvének három alapvető tulajdonsága van, amelyek az alábbiakban szerepelnek.



  1. hatókör: hamis: Ezt az irányelvet alapértelmezés szerint elszigetelt körzetben használják, és főként a hatókör újrafelhasználására használják attól az alkotóelemtől, amelyen jelenleg használják.

  2. hatókör: igaz: Ezt az irányelvet a gyermek hatókörének létrehozására használják, és prototípusosan örökli a szülő hatókörét.

  3. hatókör: {…}: Ezt használják az elszigetelt hatókör létrehozására, és ez prototípusosan a szülő hatóköréből származik.



A fenti irányelvek jobb megértéséhez vessen egy pillantást az alábbi magyarázatokra.

hatókör: igaz

Szülői hatókör<<======prototype====== Child Scope

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

hatókör: {}

Szülői hatókör<<=====$Parent Scope ========= Isolates Scope

Itt háromféle interfészt kell használnunk az izolált hatókör és a szülő hatókör között.

  1. adatkötés (=)
  2. interpolál (@)

  3. kifejezés (&)

Példák

hatókör: {myValue1: '@ attribute1', myValue2: '= attribute2', myValue3: '& attribute3'}

Interpolálás vagy attribútumok (@)

Ezt arra használják, hogy az izolált hatókört összekapcsolják a DOM attribútummal. Ez alapvetően egyirányú irányelvet állít fel az elszigetelt hatókör és a szülő hatókör között. Ez azt jelenti, hogy ha bármilyen változás történik a szülői hatókörben, akkor ez azonnal tükröződik az elszigetelt hatókörben is.

Példa

.directive ('myDirective', function () {return {hatókör: {myAttribute: '@',}}})

Most már használhatunk egy irányelvet, amely megköti ezt a kettőt.

 

Kifejezés (&)

A Kifejezés (&) arra szolgál, hogy a szülő hatóköréből az elszigetelt hatókörbe hívjon függvényt. Elsősorban a visszahívások létrehozására szolgál más funkciók mellett.

Példa

.directive ('myDirective', function () {return {hatókör: {myIsolatedFunction: '&'}}})

Most fogjuk használni ÍTÉLET

Kattintson az OK gombra. A módszer most a következő módon hívja vissza a vezérlőt. .controller ('myTestController', ['$ scope', function ($ scope) {$ scope.myUpdatedValue = function (myValue) {$ scope.updatedValue = myValue}}])

Kötés (=)

A kötés (=) hasonló az attribútumokhoz, az egyetlen különbség az, hogy egy kétirányú kommunikációs csatornát hoz létre egy helyett.

Példa

.directive ('myDirective', function () {return {hatókör: {myBinding: '=',}}})

Foreach funkció az Angular8-ban

Most, hogy ismeri az Angular8 izolált hatókörének alapkoncepcióját, vizsgáljuk meg a foreach függvényt is.

Foreach szögben8

A foreach funkció engedélyezéséhez az Angular8 alkalmazásban kövesse az alábbiakban ismertetett lépéseket.

1. lépés

Indítsa el a Visual Editor 2012 alkalmazást, és keresse meg a Projekt elemet az Új és a Fájl alatt. Amikor megnyílik az ablak, nevezze el a fájlt az OrForeach néven, majd kattintson az OK gombra.

2. lépés

Az 1. lépés befejezése után nyissa meg a Megoldáskezelőt, amely css fájlt, js fájlt, ts fájlt, valamint html fájlt tartalmaz.

3. lépés

typecast kettős int java

Most futtassa a következő kódot a foreach függvényhez.

forOrforeach.ts

A osztály {function () {var array = [1, 2, 3, 4] for (var v a tömbben) // foreach-ként működik {alert} (alert (tömb [v])}}} ablak.onload = () => {var hívás = új A () hívás.funkció ()}

Default.html

TypeScript HTML App

App.js

var A = (function () {function A () {} A. prototípus.function = function () {var array = [1, 2, 3, 4] for (var v a tömbben) {alert (tömb [v] )}} return A}) () window.onload = function () {var call = new A () call.function ()}

A fenti kódok kimenete ilyennek fog kinézni.

Kimenet - elszigetelt hatókör szögletes8 - Edureka

forEach a TypeScript-ben

Most vizsgáljuk meg, hogyan lehet végrehajtani egy foreach utasítást a TypeScript-ben.

Newforeach.ts

A osztály {no: szám [] = [1, 2, 3] lognumber () {this.no.forEach ((nos) => {// foreach utasítás document.write ('number =:' + nos)}) }} window.onload = () => {var call = new A () call.lognumber ()}

A fentiek kimenete a következő lesz:

Most, hogy már tudja, hogyan használja mind az foreach, mind az elszigetelt hatókörű modulokat, reméljük, hogy mindennapi Angular8 kódolásában ugyanezt fogja használni annak hatékonyabbá tétele érdekében.Ismerje meg mind az foreach, mind az elszigetelt hatókör alapjait, valamint felhasználását az Angular8-ban.

Ezzel eljutottunk az Angular Tutorial blog végéhez. Remélem, hogy ez a blog informatív és hozzáadott értéket jelentett Önnek. Most már tisztában kell lennie az Angular építőköveivel, és készen áll az Angular alkalmazás létrehozására. Azt javasolnám, hogy menjen át ezen Szögletes bemutató Edureka videó lejátszási lista videók megtekintéséhez és az Angular alkalmazás létrehozásának megismeréséhez.

Nézze meg a az Edureka, egy megbízható online tanulási vállalat, amelynek több mint 250 000 elégedett tanulóval rendelkező hálózata elterjedt az egész világon. Az Angular egy JavaScript keretrendszer, amelyet méretezhető, vállalati és teljesítményű kliensoldali webalkalmazások létrehozására használnak. Mivel az Angular framework elfogadása magas, az alkalmazás teljesítménymenedzsmentje a közösség által vezérelt, közvetetten jobb munkalehetőségeket eredményez. Az Angular Certification Training célja ezeknek az új koncepcióknak az áttekintése az Enterprise Application Development körül.