Angular 通过Ionic 4中的侧菜单路由页面
我假设通过创建页面的组件(侧菜单上的项目)来路由页面,以简化路由。我也知道路由使用什么代码,但不知道在哪里使用,因为在错误的地方使用代码不会给我提供任何解决方案Angular 通过Ionic 4中的侧菜单路由页面,angular,ionic-framework,ionic4,router-outlet,ion-nav,Angular,Ionic Framework,Ionic4,Router Outlet,Ion Nav,我假设通过创建页面的组件(侧菜单上的项目)来路由页面,以简化路由。我也知道路由使用什么代码,但不知道在哪里使用,因为在错误的地方使用代码不会给我提供任何解决方案 这是我的app.component.ts文件。 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.
这是我的app.component.ts文件。
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.
下面是app routing.module.ts
文件
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 {}
如果我还需要修改每个菜单项的html文件,请告诉我。如果可能,请尝试用非专业术语向我解释。在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文件中:
import { Router } from "@angular/router";
constructor(private router:Router){}
navtigateToPage(pageName){
this.router.navigate([pageName]);
}
轨道
(单击)可以添加到ts文件中的任何节点元素(div、span、ion图标…):
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文件中:
import { Router } from "@angular/router";
constructor(private router:Router){}
navtigateToPage(pageName){
this.router.navigate([pageName]);
}
轨道
(单击)可以添加到任何节点元素(div、span、ion图标…)应用程序模块中的IONAL中没有关系,您提供了错误的给定值,因此请编辑它。并且可以在您想要的地方使用路由。如果您在ts文件中,那么这个.router.navigate([“track”]);如果来自html,则添加属性routerLink=“/track”。这就是您需要的吗?但是
app routing.module.ts
是在为路由创建/启动应用程序/页面时自行构建的。整个应用程序。我应该在哪里添加这个.router.navigate([“track”])代码>行。我添加了一个答案。在app.module中,ionic中没有关系,您提供了错误的答案,所以请编辑它。并且可以在您想要的地方使用路由。如果您在ts文件中,那么这个.router.navigate([“track”]);如果来自html,则添加属性routerLink=“/track”。这就是您需要的吗?但是app routing.module.ts
是在为路由创建/启动应用程序/页面时自行构建的。整个应用程序。我应该在哪里添加这个.router.navigate([“track”])代码>行。我添加了一个答案