Ionic 2 Events, Publishing, and Subscribing Not Working

I'm trying to use Publish, and Subscribeof ionic- angular

But I do not get any data and errors. 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]);
 }
}

I use ionic-angular beta0.4.


I understand why it is not displayed on the console. Page 2 must be loaded and ready before the event. If page 1 was to start and be published before the page is loaded, then this data cannot be captured.

solvable

+6
source share
3 answers

, , , - ,

, , . , plunker.

, ConnectivityService, - , ( ), ( - , -)

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

"" "" ( , ), :

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 connection (true)
      this.connectivityService.connectionHasChanged(true);
    }, false);

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

ionicBootstrap(MyApp);

, : ( )

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');
    }
  }
}
+2

, , . , promises . , , :

this.navCtrl.setRoot(NextComponentPage, Parameters).then(()=>
{
    this.events.publish("user:created", userdetails);
});
0

.subscribe .

and insted from console.log (data [0]) did you try to use console.log (data) ?

0
source

All Articles