角度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> 

テイクgithubのプロジェクトthelgevold /： イベントは、私は外部スクリプトが含まれている場合、私は任意の角度の2プロジェクトに書い延期ますhttps://github.com/tan9/angular-2-samples/tree/event-postponedブランチ。

角度2アプリケーションが奇妙な動作を開始し、私は手動でを別のイベントをトリガするまで、いくつかのイベントの変更は、角度によって考慮に入れられないだろう、私はこの記録として正しいレンダリングを取得するためにボタンを2回クリックする必要があります私がアップロード

をimgurするために、私は私が書いた外部スクリプトに何が起こっているか分からない、それはhtml2canvasを使用してスクリーンショットをキャプチャし、別のWebサービスに送信することができる唯一のhtml2canvasとes6-promiseに依存して単純なプロジェクト、です。バンドルはwebpackによって構築されていて、ブラウザーを使ってバンドルを構築しようとしましたが、運がありませんでした。

Answer 1

これは、Zone.jsの動作方法に関する警告です。 Zone.jsは非同期ブラウザイベントにパッチを当て、Angularが変更がいつ発生するかを判断するためのAPIを提供し、UIを更新するために変更検出をいつ実行するかを指定します。

ブラウザのPromise APIを使用するサードパーティのライブラリの場合、Zone.jsがスクリプトタグ経由で読み込まれる前にロードする必要があります。これは非同期イベントがパッチされるように、Angularが実行する "ゾーン"で実行されるようになっています。ゾーン外で実行されるイベントは、変更検出が手動で実行されない限り、またはイベントがコンテキスト角度ゾーン。

Answer 2

ブランドンで説明したように、Angularsゾーン

内部で実行コードはあなたがまた、角度

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

（未これがあれば必ず外のゾーンを得ることができますNgZone

constructor(private ngZone:NgZone){} 

... 

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

を注入作るには100％正解、私はちょうど私の電話の上にあり、見た目が面倒です。仕事にならない場合はコメントを投稿してください。