通过 Ionic 4 中的侧菜单路由页面答案

【问题标题】：Routing pages via side-menu in Ionic 4通过 Ionic 4 中的侧菜单路由页面
【发布时间】：2020-02-18 14:07:58
【问题描述】：

     For days now I've been trying to route/link pages via the side-menu. So that I'm able to move to different pages from the side-menu itself. I've searched for tutorials on Angular 8 and Ionic 4 but couldn't find the specific article that relates to my issue.

我打算通过创建页面组件（将在侧菜单上的项目）来路由页面，以便于路由。我也有点知道使用什么代码进行路由，但不知道在哪里使用它，因为在错误的地方使用代码不会为我提供任何解决方案。

This is my app.component.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule, routeComponents } from './app-routing.module';

@NgModule({
  declarations: [AppComponent, routeComponents],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

下面是app-routing.module.ts 文件。

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { TrackComponent } from './track/track.component';
import { AboutComponent } from './about/about.component';
import { CategoryComponent } from './category/category.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.component').then( m => 
m.HomeComponent)},
  { path: 'category', loadChildren: () => import('./category/category.component').then( m => 
m.CategoryComponent)},
  { path: 'track', loadChildren: () => import('./track/track.component').then( m => 
m.TrackComponent)},
  { path: 'about', loadChildren: () => import('./about/about.component').then( m => 
m.AboutComponent)}
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }
export const routeComponents = [CategoryComponent, TrackComponent, AboutComponent, 
HomeComponent];

如果我还需要修改每个菜单项的 html 文件，请告诉我。如果可能，请尝试用外行的术语向我解释。

【问题讨论】：

app.module 中的 ionic 没有关系，您提供了错误的给定，因此请编辑它。并且可以在您想要的地方使用路由。如果你在 ts 文件中，那么 this.router.navigate(["track"]);如果从 html 添加属性 routerLink="/track" 。这是你需要的吗？
但是 app-routing.module.ts 是在为路由创建/启动应用程序/页面时自行构建的。通过应用程序。我应该在哪里添加this.router.navigate(["track"]); 行。
我已经添加了答案

标签： angular ionic-framework ionic4 router-outlet ion-nav

【解决方案1】：

在ts文件中：

import { Router } from "@angular/router";

constructor(private router:Router){}
navtigateToPage(pageName){
 this.router.navigate([pageName]);
}

在 html 文件中：

<ion-item (click)="navtigateToPage('track')">
<ion-label>track</ion-label>
</ion-item>

（点击）可以添加到任何节点元素（div、span、ion-icon...）

【讨论】：