2016-11-10 3 views
1

Вот код, демонстрирующий zone.js возможности от here:Не может понять zone.js примера

Zone.current.fork({}).run(function() { 
    Zone.current.inTheZone = true; 

    setTimeout(function() { 
     console.log('in the zone: ' + !!Zone.current.inTheZone); 
    }, 0); 
}); 

console.log('in the zone: ' + !!Zone.current.inTheZone); 

выше зарегистрирует:

'in the zone: false' 

'in the zone: true' 

Я не очень понимаю, что это эта зона здесь и как это связано с перехватом событий, о которых говорит this video.

Он выводит false в первый раз, потому что это Zone.current.inTheZoneundefined, и так как мы изменили Zone.current.inTheZone = true;, что это значение теперь, когда ouputted второй раз. Что особенного здесь zone?

+0

это может помочь вам понять http://blog.thoughtram.io/angular/2016/01/22/understanding-zones.html –

ответ

0

Зона позволяет сохранять некоторые свойства в асинхронных операциях, инкапсулированных в зону. Таким образом, в основном здесь показано, что в текущей зоне нет свойства inTheZone. Но когда вы выполнили zone.fork().run(), обратный вызов выполняется в новой разветвленной зоне, и асинхронная задача setTimeout будет выполнена и в этой разветвленной зоне. И вы получите свойство inTheZone внутри этой зоны, но оно не будет доступно в других зонах. Вот, наверное, лучший пример:

Zone.current.fork({}).run(function() { 
    Zone.current.inTheZone = true; 

    setTimeout(function() { 
     console.log('in the zone: ' + !!Zone.current.inTheZone); // true 
    }, 2000); 
}); 

setTimeout(function() { 
    console.log('in the zone: ' + !!Zone.current.inTheZone); // false 
}, 1000); 

Как вы можете видеть, здесь есть две задачи асинхронного программирования. И setTimeout из текущей зоны будет выполняться раньше таймаута из разветвленной зоны. run() является синхронным, поэтому inTheZone должен быть установлен в true до того, как будет выполнен первый наборTimetout. Но он зарегистрирован как false, потому что текущая зона не может получить доступ к свойству из разветвленной зоны.