Ionic 2 事件，发布和订阅不起作用 [英] Ionic 2 Events, publish and subscribe not working

问题描述

我正在尝试使用 Publish 和 Subscribe from ionic-angular

I'm trying to use Publish and Subscribe from ionic-angular

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

But I am not receiving any data nor error. Here are my codes

第 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.

我知道为什么它没有显示在控制台上.第 2 页必须在第 1 页启动事件之前加载并准备好.如果页面 1 甚至在页面 2 加载之前启动和发布，页面 2 将无法获取该数据.

I realize why it doesn't show on console.. Page 2 has to be loaded and ready before Page 1 initiate an event. If Page 1 were to initiate and publish before Page 2 is even loaded, Page 2 will not be able to grab that data.

已解决

推荐答案

我需要使用事件，因为我一直在听我的互联网我的第一页上的状态，我希望当我的我的第二页网络已关闭

I would need to use event as I'm constantly listening to my internet status on my first page, and I would like something to happen when my network is off on my second page

在我现在正在使用的应用程序中，我们正在做同样的事情.请看看这个 plunker.

In the app I'm working right now, we're doing exactly the same. Please take a look at this plunker.

如您所见，我创建了一个 ConnectivityService，其主要目标是在连接状态发生变化时(通过您的第一页)得到通知，然后通知所有订阅者那个(你的第二页——如果你愿意，也可以是每一页——)

As you can see there, I've created a ConnectivityService whose main goal is to be informed when the connection status has changed (by your first page), and then notify to all the subscribers about that (your second page -and every page if you want-)

ConnectivityService.ts

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);
  }
}

完成后，我们只需要在您的第一页中注册在线"和离线"事件(或像在您的应用中那样做)并在连接状态发生变化时通知服务:

With that being done, we just need to register the 'online' and 'offline' events in your first page (or do it like you're doing it in your app) and notify the service when the connection status changes:

App.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);

最后但并非最不重要的一点是，在您的第二页(或您需要的每一页)中，您只需订阅该服务并处理事件

And last but not least, then in your second page (or every page you need to) you can just subscribe to that service and handle the events

首页.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');
    }
  }
}

这篇关于Ionic 2 事件，发布和订阅不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！