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

我需要使用活动，因为我一直在听我的互联网在我的第一页上的状态，我想在我的时候发生一些事情网络在我的第二页上关闭

在我现在正在使用的应用程序中，我们正在做同样的事情。请查看此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'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);

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

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

Answer 2

阅读了这里和其他论坛的帖子，似乎订阅活动的部分相当棘手。我收集了理解生命周期钩子以及承诺如何工作对解决问题很重要。如果您希望第二页能够在现有页面上订阅已发布的事件，则以下情况有效：

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

Answer 3

在构造函数中调用 .subscribe 。

并且输入 console.log（data [0]） 您是否尝试过 console.log（数据）？

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

3 个答案: