基于网络状态离子更新模板答案

【问题标题】：updating template based on network status ionic基于网络状态离子更新模板
【发布时间】：2017-06-14 18:13:38
【问题描述】：

我希望能够根据网络状态更新 ionic 页面。该函数正在被调用，但页面没有被更新。如有建议，不胜感激。

向所有订阅者发送消息的消息服务。

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>

【问题讨论】：

控制台日志中的订阅方法正在打印您的消息？
@jonnysai 是的。首次加载应用程序时，会显示状态，但是当我更改连接状态时，会打印消息，但不会打印模板上的文本。
分享你的html代码。
我已经用模板更新了问题。

标签： angular ionic-framework ionic2 ionic3

【解决方案1】：

我们可能在此处遇到了 Zone 问题。尝试将您的组件更新为以下内容以在更改时重新运行区域。

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';

【讨论】：

您好，感谢您的帮助。最后一个问题。这是推荐的方式吗？
这不是不推荐的方式。事物/订阅可能会超出区域，因此没有理由不应该在更改时运行区域。

【解决方案2】：

我认为问题是因为在使用胖箭头时使用打字稿，当编译成普通 js 时，它会创建一个“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;
}

【讨论】：