1

私はかなり基本的な JS で作成された非角度ページを持っており、いくつかの Angular2 を学習して追加し、それをいくつかの新しい機能に使用することは素晴らしいアイデアだと思いました。

私の計画は、古いコードによって更新されるオブジェクトに Angular2 コンポーネントをバインドし、Angular2 マジックを使用して UI のチャンクを更新することでした。

問題は、外部 JS で行われた変更に対応するように Angular2 を説得できないことです。それを行うためのトリックは何ですか？問題をグーグルで検索しようとすると、Angular2 の変更検出プロセスの詳細な説明につながりますが、これまでのところ役に立ちませんでした。これはただのひどい考えですか？

ランダムな Angular2 jsfiddle を見つけ、それをハッキングして問題を示しました。文字列は「window.names」に追加されますが、角度側から追加されるまで表示されません: https://jsfiddle.net/byfo3jg3/。コードは次のとおりです。

var names = ['Joe'];

setTimeout(function() {
  names.push("Frank");
}, 1000);

setTimeout(function() {
  names.push("Sterve");
}, 2000);

setTimeout(function() {
  names.push("Garfield");
}, 3000);

(function() {
  var HelloApp,
        ListThing;

    ListThing = ng
        .Component({
            selector: 'list-thing',
            template: '<ul><li *ng-for="#name of names">{{name}}</li></ul>',
            directives: [ng.NgFor]
        })
        .Class({
            constructor: function() {
                this.names = window.names;

        setTimeout(function() {
                    this.names.push("Oh hai");
                }.bind(this), 10000);
            }
        });

    HelloApp = ng
        .Component({
            selector: 'hello-app',
            template: '<list-thing></list-thing>',
            directives: [ListThing]
        })
        .Class({
            constructor: function() {}
        });

    document.addEventListener('DOMContentLoaded', function() {
        ng.bootstrap(HelloApp);
    });
}());
4

3 に答える 3

2

これはただのひどい考えですか？

はい。

Angular の自動変更検出システムは、(コンポーネントに表示させたい) データへの変更が、Zone.js によってモンキー パッチが適用されたイベント ハンドラー内で発生していることを前提としています。Angular の変更検出は、そのようなイベント ハンドラーが起動したときに実行されるためです (技術的には、イベント ハンドラーが終了した後に実行されます)。

コンポーネント ビューを自動的に更新する場合は、Angular 内部 (Angular ゾーン内) でバインドされたデータを変更する必要があります。@Jigar が答えたように、コードを変更して を呼び出すことができますが、angularZone.run(_ => // make changes here)そうする必要がある場合は、データを管理および操作するコードをサービス (ま​​たはロジックが最小限の場合はコンポーネント) に移動することもできます。

Günter の代替アプローチも参照してください。Angular 内 (したがって Angular ゾーン内) にイベント リスナーを設定します。次に、Angular ゾーンの外で変更を行うたびに、そのイベントを発生させます。

于 2016-04-20T21:56:14.497 に答える
1

NgZone を window オブジェクトに設定してから、ゾーンの run 関数を呼び出す必要があります。

Angular 2 Angular の外部で行われた変更を検出するように Angular を取得する方法を参照してください。そう質問

于 2016-04-20T04:16:39.133 に答える
1

namesテンプレート内で機能するには、コンポーネント プロパティにする必要があります。

constructor(){this.names = window.names}

への変更window.namesは angular によって検出されないため、いくつかのオプションがあります: 使用して名前をポーリングするsetInterval(()=>{this.names = window.names}, 1000)か、グローバル コールバックを公開します。

constructor(zone:NgZone) 
{
   window.notify = ()=> {
        zone.run(()=> { 
                this.names = window.names;
        });
   }
 }

プレーンな jswindow.notify()から呼び出すか、他の方法を使用して変更検出を呼び出します。

于 2016-04-18T08:25:28.770 に答える