0

angular 2 beta RC を使用しているときに奇妙な問題が発生しました。angular 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>

たとえば、 https://github.com/tan9/angular-2-samples/tree/event-postponedブランチで行ったように、以下のスクリプトを追加したら、github プロジェクトthelgevold/angular-2-samplesを取り上げます。

angular 2アプリケーションは奇妙な動作を開始します。いくつかのイベントの変更は、別のイベントを手動でトリガーするまでangularによって考慮されません.imgurにアップロードしたこの記録を正しくレンダリングするには、ボタンを2回クリックする必要があります

ここに画像の説明を入力

私が書いた外部スクリプトに何が起こっているのかわかりません.html2canvasを使用してスクリーンショットをキャプチャし、別のWebサービスに送信できるhtml2canvasとのみに依存する単純なプロジェクトです。es6-promiseバンドルは webpack によってビルドされたもので、browersify を使用してバンドルをビルドしようとしましたが、うまくいきませんでした。

4

2 に答える 2

1

これは、Zone.js の動作に関する注意事項です。Zone.js は、非同期ブラウザー イベントにパッチを適用し、Angular が UI を更新するためにいつ変更が発生し、いつ変更検出を実行するかを決定するために使用する API を提供します。

ブラウザの Promise API を使用するサードパーティ ライブラリの場合、スクリプト タグを使用して Zone.js をロードする前にロードする必要があります。これは、非同期イベントにパッチが適用され、Angular が実行される「ゾーン」で実行されるようにするためです。ゾーン外で実行されているイベントは、変更検出が手動で実行されない限り、またはイベントがコンテキストで実行されない限り、取得されません。アングルゾーン。

于 2016-05-16T17:10:20.480 に答える
0

ブランドンが説明したように、コードを Angulars ゾーン内で実行します

注入するNgZone

constructor(private ngZone:NgZone){}

...

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

Angular の外でゾーンを取得することもできます

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

(これが 100% 正しいかどうかはわかりません。私は携帯電話を使用しているだけで、調べるのが面倒です。うまくいかない場合は、コメントを投稿してください。

于 2016-05-16T18:44:51.820 に答える