Как использовать события Ionic2

Question

Я получаю несогласованные результаты от события входа, созданного в моей службе входа. Когда пользователь входит в систему или выходит из системы, события не попадают на страницы подписки, соответственно изменяя ссылки на странице.

UPDATE После более тестирования я обнаружил, что каждая страница имеет подобрать по подписке, но только после того, как он был введен первым. Другими словами, если я перейду на 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

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

нового 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; 
    }) 
    } 
} 

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

Набор

providers: [LoginService] в приложении. module.ts внутри ngModule.

В настоящее время вы установили LoginService как поставщика для каждой страницы. Поэтому для каждого компонента создается новая услуга. Для работы ваших мероприятий LoginService должен быть одноточечным.

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

и удалить поставщик из всех других pages.This пути только одно события опубликованных для одной службы и будет выбрано на каждой странице.

No provider for navcontroller

потому, что вы инъекционный NavController в сервис. Проверить this answer для объяснения