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

Question

更新：

实际上，我已经实现了 "toggle menu" doc.Please 请参阅 that.The 切换菜单正在运行 fine.But 我需要在用户单击toggle menu.It 仅适用于 constructor.After，我无法做到 that.That 可能是由于 Root component.How 我可以实现吗？

Ionic2 Toggle Menu

创建app.component.ts组件后可以访问哪个生命周期事件？第一次触发 constructor() code.But 之后 none 的生命周期事件开始工作。

我的场景：我在 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>

现在我需要在每次用户点击上方时获取令牌值 menu.But 它只有效 once.After 那不是 working.Can 你告诉我一个解决方法？

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 以更清楚地了解如何使用事件。

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

Life cycle events of app.component.ts

lifecycle

ionic-framework

ionic2

angular