Угловые 2 события откладываются странно, когда я включаю какой-то другой неугольный скрипт

Question

У меня возникла странная проблема при использовании углового 2-бета-RC. События получить отложено, если я включаю внешний сценарий, который я написал в любой угловой 2 проекта:

<script> 
    (function(r,a,k,e,y,o,u){r['RakrWidgetObject']=y;r[y]=r[y]||function(){ 
    (r[y].q=r[y].q||[]).push(arguments)},r[y].l=1*new Date();o=a.createElement(k), 
    u=a.getElementsByTagName(k)[0];o.async=1;o.src=e;u.parentNode.insertBefore(o,u) 
    })(window,document,'script','//cht.technology/rakr.js','rakr'); 

    rakr('//localhost:3000', 'RAKR-000001'); 
</script> 

Take GitHub проект thelgevold/угловые-2-образцы, например, когда я добавляю ниже сценарий, как я сделал в https://github.com/tan9/angular-2-samples/tree/event-postponed филиал.

Угловое 2 приложения начинает вести себя странно, некоторые изменения событий не будут принимать во внимание угловым, пока я не вызвать другое событие вручную, я должен нажать кнопку дважды, чтобы получить правильную визуализацию в качестве этой записи я закачанной в Imgur

Я не знаю, что происходит с внешним сценарием я написал, что это простой проект, который зависит только от html2canvas и es6-promise, который может захватить скриншот с помощью html2canvas и отправить его на другой веб-службы , Пакет был создан webpack, и я попытался построить пакет, используя browersify, без везения.

Answer 1

Это предостережение от того, как работает Zone.js. Zone.js исправляет события асинхронного браузера и предоставляет API, в котором Angular использует, чтобы определить, когда происходят изменения, и когда запускать обнаружение изменений для обновления пользовательского интерфейса.

В случае вашей сторонней библиотеки, использующей API Promise API, ее необходимо загрузить до загрузки Zone.js через тег скрипта. Это значит, что асинхронные события патчат, поэтому они будут запускаться в «зоне», в которой выполняется функция «Угловая». События, выполняемые за пределами зоны, не будут подняты, если обнаружение изменений не будет запущено вручную или событие будет выполняться в контексте Угловая зона.

Answer 2

Как пояснил Brandon, код должен выполняться внутри углам главного зоны

впрыснуть NgZone

constructor(private ngZone:NgZone){} 

... 

this.zone.run(() => ... /* code here that modifies Angulars model from the outside */); 

Вы также можете получить зону за пределами Угловая

bootstrap(AppComponent, ...).then((ref => ref.instance.injector.get(NgZone)); 

(Не уверен, если это 100% правильно, я просто нахожусь на своем телефоне и смотрю вверх, громоздко. Пожалуйста, напишите комментарий, если вы не можете заставить его работать.