Какво е изолиран обхват в Angular8?



В тази статия ще научите всичко за изолирания обхват в Angular8 заедно с примери. Ще разберете и функцията foreach в Angular8.

Ако сте използвали от известно време вероятно сте чували за функцията за обхват. Това е вграден модул в Angular8 и произхожда от стандартния обхват на родителя. Но през повечето време това не се изисква при разработването на общи компоненти и по този начин в картината влезе изолиран обхват. В тази статия ще обсъдим всичко за изолирания обхват в Angular8 в следния ред:

Нека да започнем.





Какво е изолиран обхват в Angular8?

Изолираният обхват в Angular8 не е прототипично извлечен от родителския обхват, но прави функцията за достъп до родителския обхват чрез $ parent. Директивата за изолиран обхват в Python има три основни свойства, които са изброени по-долу.



  1. обхват: false: Тази директива се използва по подразбиране в изолиран обхват и се използва главно за повторно използване на обхвата от компонента, в който се използва в момента.

  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 {scope: {myAttribute: '@',}}})

Сега можем да използваме директива, за да свържем тези две заедно.

 

Израз (&)

Изразът (&) се използва за извикване на функция от родителския обхват към изолирания обхват. Използва се главно за създаване на обратно извикване наред с други функции.

Пример

.directive ('myDirective', function () {return {scope: {myIsolatedFunction: '&'}}})

Сега ще използваме РЕШЕНИЕ

Щракнете върху OK Методът ще се обади обратно на контролера по следния начин. .controller ('myTestController', ['$ scope', function ($ scope) {$ scope.myUpdatedValue = function (myValue) {$ scope.updatedValue = myValue}}])

Обвързване (=)

Binding (=) е подобен на Attributes, единствената разлика е, че той създава двупосочен комуникационен канал вместо един.

Пример

.directive ('myDirective', function () {return {scope: {myBinding: '=',}}})

Функция на foreach в Angular8

Сега, след като знаете основната концепция за изолирания обхват в Angular8, нека разгледаме и функцията foreach.

Foreach в Angular8

За да активирате функцията foreach в Angular8, следвайте стъпките, описани по-долу.

Етап 1

Стартирайте Visual Editor 2012 и отидете до Project под New и File. Когато прозорецът се отвори, наименувайте файла като forOrforeach и след това щракнете върху бутона OK.

Стъпка 2

След като стъпка 1 приключи, отворете Solution Explorer, който съдържа css файл, js файл, ts файл, както и html файл.

Стъпка # 3

как да се превърне двойно в int java -

Сега изпълнете следния код за функцията foreach.

заOrforeach.ts

клас A {функция () {var array = [1, 2, 3, 4] for (var v in array) // за действия като foreach {alert (array [v])}}} window.onload = () => {var call = new A () call.function ()}

По подразбиране.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] )}} върнете A}) () window.onload = function () {var call = new A () call.function ()}

Изходът за горните кодове ще изглежда по следния начин.

Изход - изолиран обхват в angular8 - Edureka

forEach във TypeScript

Сега нека разгледаме как да приложим оператор foreach в TypeScript.

Newforeach.ts

клас A {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, доверена компания за онлайн обучение с мрежа от над 250 000 доволни учащи, разпространени по целия свят. Angular е JavaScript рамка, която се използва за създаване на мащабируеми, корпоративни и ефективни уеб приложения от страна на клиента. Тъй като приемането на Angular framework е високо, управлението на производителността на приложението се управлява косвено от общността, което води до по-добри възможности за работа. Обучението за ъглово сертифициране има за цел да обхване всички тези нови концепции около разработването на корпоративни приложения.