如何使用Ionic2 Events

Question

我在登錄服務中創建的登錄事件的結果不一致。 當用戶登錄或注銷時，在訂閱頁面上沒有獲取事件，從而相應地更改頁面上的鏈接。

更新經過更多測試后，我發現每個頁面都確實接受了訂閱，但只有在首先輸入之后。 換句話說，如果我在登錄之前轉到pageWithLink.ts，那么頁面將正確讀取訂閱更新，但如果我在轉到頁面之前登錄它將忽略訂閱更新。

tabs.ts

import { Component } from '@angular/core';
import { NavParams } from 'ionic-angular';

import { page1 } from '../page1';
import { page2 } from '../page2';
import { page3 } from '../page3';
@Component({
  templateUrl: 'tabs.html'
})
export class Tabs {
  index:any;
  tab1Root: any = page1;
  tab2Root: any = page2;
  tab3Root: any = page3;

  constructor(public navParams: NavParams) {
    if(navParams.get('index') === undefined || navParams.get('index') === null){
        this.index = "0";
    } else {
        this.index = navParams.get('index');
    }
  }
}

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { Tabs } from '../tabs';
import { page1 } from '../page1';
import { page2 } from '../page2';
import { page3 } from '../page3';

import { LoginService } from '../services/loginService';

@NgModule({
  declarations: [
    page1,
    page2,
    page3,
    Tabs
],
  imports: [
    IonicModule.forRoot(MyApp, {
      swipeBackEnabled: true
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    page1,
    page2,
    page3,
    Tabs
],
  providers: [LoginService]
})
export class AppModule {}

loginService.ts

import { Injectable } from '@angular/core';
import { Events } from 'ionic-angular';
import { AlertController, NavController, ViewController, Events, App } from 'ionic-angular';
import { Tabs } from '../tabs';
import { page1 } from '../page1';

@Injectable()
export class LoginService {
  userStatus: boolean;
  constructor(public events:Events, public alertController:AlertController, public navController: NavController, public viewController:ViewController, public app:App){}
  sendUserStatus(statusOfUser) {
    this.events.publish('login:Status', statusOfUser);
  }

  login(){
   //login successful
   this.sendUserStatus(true)
  }

  logout(){
   //logout successful
     this.sendUserStatus(false)
      }
    }

pageWithLink.ts

import { Component } from '@angular/core';
import { Events } from 'ionic-angular';

@Component({
  selector: 'pageWithLink',
  templateUrl: 'pageWithLink.html',
  providers: [LoginService]
})
export class pageWithLink {
      person: any;
      constructor(public events:Events){
         this.events.subscribe('login:Status', login => {
         this.person = login;
        })
      }
}

pageWithLink.html

<ion-header class="opaque">
   <ion-buttons end>
      <button ion-button icon-only *ngIf="person" (click)="signout()">
        <ion-icon name="log-out"></ion-icon>
      </button>
      <button ion-button icon-only *ngIf="!person" (click)="openModal()">
        <ion-icon name="log-in"></ion-icon>
      </button>
    </ion-buttons>
</ion-header>

Answer 1

組

providers: [LoginService] ngModule中的app.module.ts中的providers: [LoginService] 。

目前，您已將LoginService設置為每個頁面的提供程序。 因此，為每個組件創建了一個新服務。 要使您的事件發揮作用， LoginService需要是單例。

@NgModule({
    //declarations,imports etc.
    providers:[LoginService]
})

並從所有其他頁面中刪除提供程序。這樣，只為單個服務發布一個事件，並且每個頁面都會選擇該事件。 該

沒有navcontroller的提供者

是因為您正在將Navcontroller注入服務。 檢查此答案以獲得解釋

Answer 2

我認為你需要訂閱LoginService events ，所以檢查更新'pageWithLink'如下：

import { Component } from '@angular/core';
import { Events } from 'ionic-angular';

@Component({
  selector: 'pageWithLink',
  templateUrl: 'pageWithLink.html',
  providers: [LoginService]
})
export class pageWithLink {
  person: any;
  constructor(private loginService: LoginService){
     this.loginService.events.subscribe('login:Status', login => {
       this.person = login;
     });
  }
}

Answer 3

@suraj的大部分內容導致了其他幾個修復調整，包括：1）在適當的情況下將大部分內容放入我的構造函數中2）為我修復的是為每個頁面添加一個登錄檢查以提供一個開頭用戶已登錄的狀態。

新的loginService.ts

import { Injectable } from '@angular/core';
import { Events } from 'ionic-angular';
import { AlertController, Events, App } from 'ionic-angular';//don't use NavController or ViewController in Injectables!
import { Tabs } from '../tabs';
import { page1 } from '../page1';

@Injectable()
export class LoginService {
  userStatus: boolean;
  constructor(private events:Events, private alertController:AlertController,  private app:App){}
  sendUserStatus(statusOfUser) {
    this.events.publish('login:Status', statusOfUser);
  }

  login(){
   //login successful
   this.sendUserStatus(true)
  }

  logout(){
   //logout successful
     this.sendUserStatus(false)
      }
    }

new pageWithLink.ts

import { Component } from '@angular/core';
import { Events } from 'ionic-angular';

@Component({
  selector: 'pageWithLink',
  templateUrl: 'pageWithLink.html'//no provider for LoginService, that's all in app.module.ts!
})
export class pageWithLink {
      person: any;
      constructor(private events:Events){

  if(UserExists){//this is a condition stating the current login status
    this.person = true;
   }

     this.events.subscribe('login:Status', login => {
     this.person = login;
    })
  }
}