Ionic 4 RouterLink 不适用于带有选项卡和侧边菜单的应用程序

Question

我用标签模板创建了一个离子应用程序。我想在一个页面上显示其他页面的侧菜单。

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

我希望你能帮助我。

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 {}

仪表板.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');
  }


}

仪表板.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>

应用程序组件.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]"