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

Question

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

侧边菜单出现，我可以点击项目，但路由器不改变路线，旧页面保留。

希望你能帮帮我。

应用-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

继续我的评论，我在评论中提到通过删除 link

中的一个以外的所有内容来缩小问题范围

问题可能出在实际的 routerLink 路径上。当你点击一个link时，URL中出现了什么，控制台是否有任何错误？

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

Answer 2

对于刚刚从侧边菜单起始页的页面复制过去并且无法与侧边菜单项交互以进行导航的用户，请记住从 ion- 中删除 id="main-content"路由器插座标签

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

Ionic 4 RouterLink not working on app with tabs and sidemenu

router

ionic-framework

angular