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

问题描述

我正在尝试从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

Page 1

import {Events} from 'ionic-angular'

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

constructor(Events)
{
 this.events = Events;

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

Page 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 。

我意识到它为什么不在控制台上显示..必须在Page之前加载并准备好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.

正如你在那里看到的，我是cre使用 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

Home.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屋！