app.component.ts 的生命周期事件

Question

更新：

实际上，我已经在此文档中实现了“切换菜单”。请看。切换菜单工作正常。但是当用户单击切换菜单时，我需要获取最新的令牌。它仅适用于构造函数.在那之后，我不能这样做。那可能是由于 Root 组件。我怎样才能做到这一点？

Ionic2 Toggle Menu

创建app.component.ts 组件后，我可以访问哪个生命周期事件？第一次触发 constructor() 代码。但之后生命周期事件都不起作用。

我的场景：我在 Ionic2 应用上实现了如下所示的侧边菜单。

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>

现在我需要每次用户点击上面的菜单时获取令牌值。但它只工作一次。之后，它就不起作用了。你能告诉我一个解决方法吗？

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

Answer 1

我将使用标志isLoggedIn 而不是token。所以，你的app.html会变成这样：

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

现在在您的app.ts 中，首先您订阅这些事件。您可以从应用程序的任何位置发布这些事件。 app.ts 中的这些订阅会在特定事件发布后立即触发。

app.ts 代码：（仅添加更改而不是整个代码）

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

现在假设您有另一个正在登录的组件。登录完成后，您可以像这样发布user:login 事件：

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

user:logout 也是如此。请参阅 this 以更清楚地了解如何使用事件。