Ionic 2活动,发布和订阅不起作用

Question

我试图使用Publish并Subscribe从离子棱角

但我没有收到任何数据也没有收到错误.这是我的代码

第1页

import {Events} from 'ionic-angular'

static get parameters(){
 return [[Events]];
}

constructor(Events)
{
 this.events = Events;

 this.events.publish("Msg", "Hello World");
}

第2页

import {Events} from 'ionic-angular'

static get parameters(){
 return [[Events]];
}

constructor(Events)
{
 this.events = Events;

 this.events.subscribe("Msg", (data) => {
  console.log(data[0]);
 }
}

我正在使用ionic-angular beta0.4.

---

我意识到为什么它没有在控制台上显示..必须在第1页启动事件之前加载并准备好.如果第1页在加载之前启动并发布,则第2页将无法获取该数据.

解决了

Answer 1

我需要使用事件，因为我不断地在第一页上监听我的互联网状态，并且我希望当我的第二页上的网络关闭时发生一些事情

在我现在正在工作的应用程序中，我们正在做完全相同的事情。请看看这个笨蛋。

正如您所看到的，我创建了一个，ConnectivityService其主要目标是在连接状态发生更改时收到通知（通过您的第一页），然后通知所有订阅者（您的第二页 - 以及每个页面，如果您想-）

连接服务.ts

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

@Injectable()
export class ConnectivityService { 

  private connectionObserver: any;
  public connection: any;

  constructor(){
    this.connectionObserver = null;
    this.connection = Observable.create(observer => {
        this.connectionObserver = observer;
    });
  }

  // Send that information to all the subscribers
  public connectionHasChanged(private isOnline: bool) {
      this.connectionObserver.next(isOnline);
  }
}

完成此操作后，我们只需在您的首页中注册“在线”和“离线”事件（或者像在应用程序中那样进行操作），并在连接状态发生变化时通知服务：

应用程序.ts

import { Component } from "@angular/core";
import { ionicBootstrap, Platform } from 'ionic-angular/index';
import { HomePage } from './home.ts';
import { ConnectivityService } from 'connectivityService.ts';

@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  providers: [ConnectivityService]
})
export class MyApp {
  constructor(private platform: Platform, private connectivityService: ConnectivityService) {
    this.addConnectivityListeners();
    this.rootPage = HomePage;
  }

  // Subscribe to online/offline events
  addConnectivityListeners(){

    // Handle online event
    document.addEventListener('online', () => {
      // Call the service, to indicate now there's connection (true)
      this.connectivityService.connectionHasChanged(true);
    }, false);

    // Handle offline event
    document.addEventListener('offline', () => {
      // Call the service, to indicate now there's no connection (false)
      this.connectivityService.connectionHasChanged(false);
    }, false);
  }
}

ionicBootstrap(MyApp);

最后但并非最不重要的一点是，然后在您的第二页（或您需要的每个页面）中，您可以订阅该服务并处理事件

主页.ts

import { NavController } from 'ionic-angular/index';
import { Component } from "@angular/core";
import { ConnectivityService } from 'connectivityService.ts';

@Component({
  templateUrl:"home.html"
})
export class HomePage {

  public status: string = '';

  constructor(private nav: NavController, private connectivityService: ConnectivityService) {

    // We subscribe to the service, so if the connection status changes, we'll be notified.
    this.connectivityService.connection.subscribe((isOnline) => {
      this.handleConnectionStatus(isOnline);
    });
  }

  // Show a message when the connection changes
  public handleConnectionStatus(private isOnline: bool) {
    if(isOnline) {
      this.status = 'Online';
      console.log('Now is Online');
    } else {
      this.status = 'Offline';
      console.log('Now is offline');
    }
  }
}