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

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]"

Answer 2

对于那些刚刚从侧面菜单起始页的页面复制过去并且无法与侧面菜单项交互以进行导航的人，请记住从 ion-router 中删除 id="main-content" -出口标签