Angular 如何使用Ionic2事件

我在登录服务中创建的登录事件导致结果不一致。当用户登录或注销时，订阅页面上的事件不会被拾取，相应地更改页面上的链接

更新 经过更多的测试后，我发现每个页面都会在订阅上显示，但只有在第一次输入之后才会显示。换句话说，如果我在登录前转到pageWithLink.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)
      }
    }

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

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

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

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>

---

我认为您需要订阅

登录服务的
事件
，因此通过更新“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;
     });
  }
}

设置

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

目前，您已将LoginService设置为每个页面的提供程序。因此，将为每个组件创建一个新服务。要使事件正常工作，登录服务必须是单例的

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

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

navcontroller没有提供程序

是因为您正在向服务中注入Navcontroller。
检查解释
@suraj拥有大部分信息，这导致了其他一些修复调整，包括：
1） 适当地将进入我的构造函数的内容私有化
2） 我得到的解决办法是在每个页面上添加一个登录检查，以提供一个开始状态，以防用户已经登录

新登录服务.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)
      }
    }

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

新页面WithLink.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;
        })
      }
}

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

providers:[LoginService]
是否在所有链接页面中设置它？@suraj yes LoginService在所有链接页面中都设置。更新了答案。。您不应该尝试在可注入服务中使用NavCOntroller我喜欢您的答案，文档也这么说，但当我从其他页面获取LoginService提供程序时，每个页面都会给我以下错误：./Tabs类选项卡中的错误-原因：NavCOntroller没有提供程序！是否可以将app.module.ts添加到问题？已添加app.module.ts。可能我没有在应用程序的其他位置正确实现LoginService？navcontroller错误是另一个错误..可能在Tabs.t中出现问题，因为您提出的解决方案导致了错误，所以没有太大帮助。你认为我们可以进一步调查吗？navCtrl和viewCtrl是LoginService的一部分。由于某些原因，当服务被作为单例时，他们正在注册错误。