ネットワーク状態に基づいてイオン状態のテンプレートを更新する

Question

ネットワーク状態に基づいてイオン性ページを更新したいと考えています。関数は呼び出されていますが、ページは更新されていません。いくつかの助言が与えられれば感謝します。

すべてのサブスクライバにメッセージを送信するメッセージサービス。

import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs'; 
import { Subject } from 'rxjs/Subject'; 

/* 
    Generated class for the MessageProvider provider. 

    See https://angular.io/docs/ts/latest/guide/dependency-injection.html 
    for more info on providers and Angular 2 DI. 
*/ 
@Injectable() 
export class MessageProvider { 

    private subject = new Subject<any>(); 
    constructor() {} 

    sendMessage(message: string) { 
    this.subject.next(message); 
    } 

    clearMessage() { 
    this.subject.next(); 
    } 

    getMessage(): Observable<any> { 
    return this.subject.asObservable(); 
    } 
} 

次のようにネットワークの状態が監視するコードとはapp.component

network.onDisconnect().subscribe(() => { 
     console.log(0); 
     MessageProvider.sendMessage('Not Connected!'); 
     }); 

network.onConnect().subscribe(() => { 
     console.log(1); 
     MessageProvider.sendMessage('Connected!'); 
     }); 

で発見されたメッセージは、page.tsに送信されているが、UIが更新取得されません。私は通常のJSにコンパイルする場合、脂肪の矢印を使用している場合typescriptですし、それはthisのコピーを作成し、あなたの名前を変更しているため、問題があると思い

<p> 
    {{message}} 
    </p> 

Answer 1

それは我々がここでゾーンの問題を抱えている可能性があります。変更時にゾーンを再実行するには、コンポーネントを次のものに更新してください。

message: any; 
subscription: Subscription; 

constructor(private _zone: NgZone) {} 

ionViewDidLoad() { 
    this.subscription = this.MessageProvider.getMessage().subscribe(message => { 
     console.log(message); 
     this._zone.run(() => { 
     this.message = message; 
     }); 
    }); 
} 

ちょうどあなたのpage.component.ts

import { NgZone } from '@angular/core'; 

Answer 2

以下のとおり

message: any; 
subscription: Subscription; 
    ionViewDidLoad() { 
     this.subscription = this.MessageProvider.getMessage().subscribe(message => { 
      console.log(message); 
      this.message = message; 
     }); 
     } 

テンプレートがあります'this'はあなたの最初の 'this'への完全な参照ではなく、ただ一つのコピーです。

あなたがコンパイルされたコードを確認した場合、私はあなたがこのやった場合は確信している：

console.log(this.message); 

をjsファイルにコンパイルする場合それはdoesnのどのconsole.log(_this.message);

実際に出力されるようにあなたは未定義の値になるだろうt存在する

私はこれについて自分自身を学んでいます。最も簡単な解決策は、値を渡してプロパティを設定できる別のセッターメソッドを作成することだと思います。

例えば

ionViewDidLoad() { 
    this.subscription = this.MessageProvider.getMessage().subscribe(message => { 
     this.setMessage(message); 
    }); 
} 

setMessage(message) { 
    this.message = message; 
}