Ionic 4 RouterLink не работает в приложении с вкладками и боковым меню - PullRequest
Новая
       15

Ionic 4 RouterLink не работает в приложении с вкладками и боковым меню

0 голосов
/ 21 апреля 2019

Я создал ионное приложение с шаблоном tabs. Я хочу показать на одной странице боковое меню для других страниц.

Появляется боковое меню, и я могу щелкнуть пункты, но маршрутизатор не меняет маршрут, и старая страница остается.

Надеюсь, вы мне поможете.

приложение-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>

Я ценю вашу помощь.

1 Ответ

2 голосов
/ 22 апреля 2019

Следуйте из моего комментария, где я упомянул сужение проблемы, удалив все ссылки, кроме одной

Это может быть фактический путь routerLink, в котором проблема. Что появляется в URL при нажатии на ссылку? Есть ли ошибки в консоли?

Попробуйте обновить пути, добавив косую черту, например [routerLink]="['/' + page.url]"

...