Изменить элементы списка бокового меню в соответствии с компонентами - PullRequest
0 голосов
/ 25 апреля 2019

У меня есть боковое меню и 3 компонента, а именно - панель инструментов, информация и выход из системы.Когда я нахожусь в компоненте Dashboard, боковое меню должно иметь элемент-выход из системы.

Когда я нахожусь в компоненте Info, боковое меню должно иметь Dashboard и элементы-выходы из системы ..

В основном, какизменить элементы меню в соответствии с различными компонентами

Заранее спасибо ...

app.component.html

<ion-app>
  <ion-split-pane>
    <ion-menu side="end">
      <ion-header>
        <ion-toolbar>
          <ion-title>{{'app.menu' | translate}}</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages" (click)="myFunction(p)">
            <ion-item [routerLink]="[p.url]">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>         
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

app.component.ts

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  public pages: Array<{title: string, url: string, icon: string}>;

  public appPages = [
    {
      title: 'Dashboard',
      url: '/dashboard',
      icon: 'tablet-portrait'
    },
    {
      title: 'Info',
      url: '/info',
      icon: 'information-circle'
    }

  ];

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    public translate: TranslateService
  ) {
    this.initializeApp();
    // set i18n
    translate.setDefaultLang('en');
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...