Question

我试图在用户登录后更改Cordova / Ionic 2中的登录菜单。例如，用户只有在登录后才能看到编辑他或她的帐户的链接，但一旦他们注销了不应该查看任何形式的帐户信息。

在app.component.ts内，我设置了辅助导航菜单：

  this.loggedInNav = [,
      { title: 'Account Information', component: account_informationPage, icon: "arrow-dropright" },
      { title: 'Settings', component: settingsPage, icon: "settings" },
      { title: 'Contact', component: contactPage, icon: "contact" }
  ];

但我不知道如何使用这个菜单。无论如何我可以从另一个页面调用此类中的变量吗？如果是这样，那可能意味着我可以设置一个简单的布尔表达式，说明用户是否已登录，然后在模板实现中使用this.loggedInNav并循环执行。

我查看了Ionic文档以获取更多信息，但我一直找不到任何信息。

- 编辑 -

这是模板文件的实现：

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        <ion-icon name="{{p.icon}}" [ngStyle]="{'padding-right': '20px', 'min-width': '40px', 'margin': '0 auto', 'font-size': '30px'}" item-start></ion-icon>
        {{p.title}}
</button>
    </ion-list>
  </ion-content>

</ion-menu>

就像我说的那样，如果我可以拥有像ng-if=loggedIn == true这样的东西，其中loggedIn可以从另一个页面调用，那将是非常好的...

Answer 1

您可以使用Events API发布/订阅登录事件。您可以在多个页面中订阅该事件，并添加需要在其发生时执行的函数。

在您的登录页面中

//inject events from ionic-angular
constructor(private events:Events){}

login(){
   //publish the login event event
   this.events.publish('user:loggedin');
   //other login related stuff
}
logout(){
   this.events.publish('user:loggedout');
}

在您的应用组件页面ts，

//inject events from ionic-angular
constructor(private events:Events){}

ngOnInit(){
   this.events.subscribe('user:loggedin',()=>{this.loggedIn=true});
   this.events.subscribe('user:loggedout',()=>{this.loggedIn=false});
}

在您的HTML中，使用*ngIf设置菜单列表。

登录后使用其他导航

1 个答案: