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
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
In the app I'm working right now, we're doing exactly the same. Please take a look at this plunker.
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
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');
}
}
}
Having read the posts here and other forums, seems like the part about subscribing to an event is rather tricky. I gather that understanding lifecycle hooks and how promises work is important to getting around the problem. The following works if you want a second page to be able to subscribe to a published event on an existing page:
this.navCtrl.setRoot(NextComponentPage, Parameters).then(()=>
{
this.events.publish("user:created", userdetails);
});
Call the .subscribe inside constructor.
and insted of console.log(data[0]) have you tried with console.log(data) ?