app.component.ts的生命周期事件 [英] Life cycle events of app.component.ts

问题描述

更新：

实际上，我已经在此doc上实现了切换菜单。请注意。切换菜单正常工作但是我需要在用户点击切换菜单时获取最新的令牌。它只适用于构造函数。之后，我不能这样做。那可能是由于根组件。我怎么能实现呢？

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切换菜单

创建 app.component.ts 组件？第一次它触发 constructor（） code.But之后没有生命周期事件正常工作。

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.

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

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

推荐答案

我将使用标志 isLoggedIn 而不是令牌。因此，您的 app.html 将如下所示：

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>

现在在 app.ts 中，首先你订阅这些活动。您可以从应用程序的任何位置发布这些事件。一旦特定事件发布， app.ts 中的这些订阅就会被触发。

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 代码:(仅添加更改但不添加整个代码）

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

现在说你有另一个组件来自你记录的地方在登录完成后，你可以发布 user：login 这样的事件：

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

user：logout 也是如此。有关使用事件的更清晰信息，请参阅此。

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

这篇关于app.component.ts的生命周期事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！