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 。

目前，您已将LoginService设置为每个页面的提供程序。因此，为每个组件创建了一个新服务。要使您的活动成功，LoginService需要单身。

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

并从所有其他页面中删除提供程序。这样，只为单个服务发布一个事件，并且每个页面都会选择该事件。

没有navcontroller的提供者

是因为您正在将Navcontroller注入服务。检查this answer以获取解释

Answer 2

我认为您需要订阅events LoginService，所以请通过更新'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;
    })
  }
}

如何使用Ionic2 Events

3 个答案: