根据网络状态更新模板 ionic

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 未更新。

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

模板如下

  <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

我认为问题是因为使用胖箭头时使用打字稿，当编译成普通 js 时，它会创建"this"的副本并将您的"this"重命名为"_this"这不是对初始"this"的完整引用，只是一个副本。

如果您检查编译的代码，我确定您是否这样做了：

console.log(this.message);

你会得到一个未定义的值，因为当编译成js时，它实际上会输出console.log(_this.message);

不存在

我自己正在学习这个，我认为最简单的解决方案是创建另一个 setter 方法，您可以将值传递给该方法并从中设置您的属性。

例如

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