Question

我使用tabs-template创建了一个离子应用程序。我想在一页上显示其他页面的侧面菜单。

出现侧面菜单，我可以单击这些项目，但路由器不会更改路线，并且保留旧页面。

希望你能帮助我。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
    { path: 'dashboard', loadChildren: './pages/dashboard/dashboard.module#DashboardPageModule'},
    { path: 'contacts', loadChildren: './pages/contacts/contacts.module#ContactsPageModule'},
    { path: 'menu', loadChildren: './pages/food-menu/food-menu.module#FoodMenuPageModule'},
    { path: 'calendar', loadChildren: './pages/calendar/calendar.module#CalendarPageModule'},
    { path: 'settings', loadChildren: './pages/settings/settings.module#SettingsPageModule' },
    { path: '**', redirectTo: 'dashboard'},
    { path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },
    { path: 'administrator', loadChildren: './pages/administrator/administrator.module#AdministratorPageModule' },
    { path: 'news-feed', loadChildren: './pages/news-feed/news-feed.module#NewsFeedPageModule' },
    { path: 'imprint', loadChildren: './pages/imprint/imprint.module#ImprintPageModule' },
    { path: 'about', loadChildren: './pages/about/about.module#AboutPageModule' },
    { path: 'privacy', loadChildren: './pages/privacy/sprivacy.module#PrivacyPageModule' }

];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

dashboard.page.ts

import { Component, OnInit } from '@angular/core';
import {MenuController} from '@ionic/angular';
import {Router} from '@angular/router';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.page.html',
  styleUrls: ['./dashboard.page.css'],
})
export class DashboardPage implements OnInit {

    sideMenuPages = [
        {title: 'Administration', url: 'administrator', icon: undefined},
        {title: 'Settings', url: 'settins', icon: undefined},
        {title: 'Imprint', url: 'imprint', icon: undefined},
        {title: 'Privacy', url: 'privacy', icon: undefined},
        {title: 'About', url: 'about', icon: undefined},
    ]

  constructor(private menu: MenuController, private router: Router) { }

  ngOnInit() {
    this.menu.enable(true, 'dashboardMenu');
  }

  toggleMenu(): void {
    this.menu.toggle('dashboardMenu');
  }


}

dashboard.page.html


<ion-header>
  <ion-toolbar>
    <ion-title>
      BA-Glauchau
    </ion-title>

    <ion-buttons slot="end">
      <ion-button (click)="toggleMenu()">
        <ion-icon slot="icon-only" name="more"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>



</ion-header>


<ion-menu side="end" menuId="dashboardMenu" contentId="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-menu-toggle *ngFor="let page of sideMenuPages">
        <ion-item [routerLink]="[page.url]">
          <ion-icon *ngIf="page.icon" slot="start" [name]="page.icon"></ion-icon>
          <ion-label>
            {{page.title}}
          </ion-label>
        </ion-item>
      </ion-menu-toggle>
    </ion-list>
  </ion-content>
</ion-menu>


<ion-content>


</ion-content>

app.component.html


<ion-app>

  <ion-header>
    <ion-toolbar>
      <ion-title>APP</ion-title>
    </ion-toolbar>
  </ion-header>


  <ion-router-outlet id="content"></ion-router-outlet>



</ion-app>



<ion-tabs>

  <ion-tab-bar slot="bottom">


    <ion-tab-button tab="dashboard">
      <ion-icon name="home"></ion-icon>
      <ion-label>Dashboard</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="contacts">
      <ion-icon name="contacts"></ion-icon>
      <ion-label>Contacts</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="menu">
      <ion-icon name="restaurant"></ion-icon>
      <ion-label>Menu</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="calendar">
      <ion-icon name="calendar"></ion-icon>
      <ion-label>Calendar</ion-label>
    </ion-tab-button>

<!--
    <ion-tab-button tab="tab1">
      <ion-icon name="flash"></ion-icon>
      <ion-label>Tab One</ion-label>
    </ion-tab-button> -->
  </ion-tab-bar>

</ion-tabs>

感谢您的帮助。

Answer 1

在我的评论之后，我提到了通过删除除一个链接之外的所有链接来缩小问题的范围

问题可能出在实际的routerLink路径上。单击链接时URL中会显示什么，控制台中是否有任何错误？

尝试通过添加正斜杠来更新路径，例如[routerLink]="['/' + page.url]"

Ionic 4 RouterLink无法在带有选项卡和侧面菜单的应用上使用

1 个答案: