web-dev-qa-db-ja.com

Ionic 3ログイン後にサイドメニューを更新

ユーザーの役割に応じてサイドメニュー項目を表示する必要があります。そのため、ページ（ロール）がログインしているロールと等しいかどうかをapp.htmlでチェックします。ただし、ログイン直後にメニュー内にアイテムは表示されませんが、ブラウザーの更新ボタンを使用してアプリを更新すると、正しいアイテムが表示されるはずです。問題は、ionicがメニュービューをキャッシュしているので、新しいメニュー項目を表示するためにアプリを更新する方法です。

別のユーザー/ロールでログインするたびに、以前のユーザー/ロールに従ってメニューが表示されます。

app.component.ts

constructor() {
    this.initializeApp();
    this.pages = [
                    { title: 'Home', component: 'HomePage', icon: 'home', role: 5 },
                    { title: 'Profile', component: 'ProfilePage', icon: 'person', role: 5 },
                    { title: 'Account', component: 'AccountPage', icon: 'home', role: 5 },
                    { title: 'Search Employee', component: 'AtlasemployeehomePage', icon: 'home', role: 4 }
                 ];

  }

app.html

<ion-list>
      <div *ngFor="let p of pages">
        <button menuClose ion-item *ngIf="p.role == role"  (click)="openPage(p)">
          <ion-icon  name="{{p.icon}}" style="margin-right:10%"></ion-icon> {{p.title}}
        </button>
      </div>

      <button menuClose ion-item (click)="presentLogout()">
        <ion-icon name="log-out" style="margin-right:10%"></ion-icon> Logout
      </button> 
    </ion-list>

ログインしているユーザーに応じてロール変数を設定しています。

angulartypescriptionic-frameworkionic2ionic3
11
Shivam

そのために Events API を使用できます

イベントは、アプリ全体でアプリケーションレベルのイベントを送信および応答するためのパブリッシュ/サブスクライブスタイルのイベントシステムです。

import { Events } from 'ionic-angular';

// login.ts page (publish an event when a user is created)
constructor(public events: Events) {}
createUser(user) {
  console.log('User created!')
  this.events.publish('user:created', user, Date.now());
}


// app.component.ts page (listen for the user created event after function is called)
constructor(public events: Events) {
  events.subscribe('user:created', (user, time) => {
    // user and time are the same arguments passed in `events.publish(user, time)`
    console.log('Welcome', user, 'at', time);
  });
}
27
Tomislav Stankovic