Life cycle events of app.component.ts

问题

Update:

Actually, I have implemented "toggle menu" as on this doc.Please see that.The toggle menu is working fine.But I need to get the latest token when a user clicks the toggle menu.It works only with the constructor.After that, I cannot do that.That is may be due to the Root component.How can I achieve that?

Ionic2 Toggle Menu

Which life cycle event can I access after creating the app.component.ts component? First time it fires constructor() code.But after that none of the lifecycle events are working.

My scenario: I have implemented side menu as shown below on Ionic2 app.

app.html

<ion-menu [content]="content">
  <ion-content padding>
   <img src="./assets/img/login.png" alt="Login" (click)="login()" *ngIf="token!=null && token.length==0" menuClose>

        //removed for clarity

    </ion-content>
</ion-menu>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

Now I need to get the token value each and every time user clicks on above menu.But it works only once.After that, it's not working.Can you tell me a workaround for this?

app.component.ts

export class MyApp extends HandleStorageService {
  @ViewChild(Nav) nav: Nav;
  rootPage = EventSchedulePage;
  menuList: Observable<any>;
  token: string = '';

  constructor(platform: Platform, public menuData: MenuData, public loadingCtrl: LoadingController, public storage: Storage) {
    super(storage);

    platform.ready().then(() => {
      StatusBar.styleDefault();
      Splashscreen.hide();
    });

    this.getMenuList();//menu list
  }

  ionViewDidEnter() {// not working this
    this.getToken().then((val) => {//get token
      this.token = val;
    });
  }

回答1:

I will use the flag isLoggedIn than token. So, your app.html will become like this:

<ion-menu [content]="content">
  <ion-content padding>
   <img src="./assets/img/login.png" alt="Login" (click)="login()" *ngIf="!isLoggedIn" menuClose>

        //removed for clarity

    </ion-content>
</ion-menu>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

Now in your app.ts, first you subscribe to these events. And you can publish these events from anywhere in the app. These subscriptions in app.ts gets triggered as soon as the particular event is published.

app.ts code: (Adding just the changes but not an entire code)

import {Events} from 'ionic-angular';

export class MyApp extends HandleStorageService{
    isLoggedIn: boolean = false;
    constructor(private events: Events){
        //Below I am assuming you store the 'loggedIn' information in localStorage. You could use your own way for retrieving this value at the start of the app.

        this.isLoggedIn = JSON.parse(localStorage.getItem('loggedIn'));

        this.listenToLoginEvents();
    }

    listenToLoginEvents(){
        this.events.subscribe('user:login', () => {
            console.log("LoggedIn triggered");
            this.loggedIn = true;
        });

        this.events.subscribe('user:logout', () => {
            console.log("Logout triggered");
            this.loggedIn = false;
        });
    }
}

Now say you have another component from where you are logging in. There when the login is done you can publish user:login event like this:

this.events.publish('user:login');

Same goes for user:logout. Refer this for more clarity on using Events.

来源：https://stackoverflow.com/questions/42942498/life-cycle-events-of-app-component-ts

标签

angular

ionic-framework

ionic2

lifecycle