我有一个离子应用程序,在Page module
下面有一个List Page Module
和一个Subdir Page Module
。下面是文件夹结构-> list/subdir.
problem :当我导航到localhost:8100/list/subdir
而不是Subdir page
加载时,我遇到了总是加载List page module
的问题。
Outcome:我希望在导航到localhost:8100/list/subdir
时加载Subdir page
;但它加载的是List page
。我只想在URL为localhost:8100/list
时加载List page
app.routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'home',
loadChildren: './home/home.module#HomePageModule'
},
{
path: 'list',
loadChildren: './list/list.module#ListPageModule'
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
list.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { ListPage } from './list.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild([
{
path: '',
component: ListPage,
children: [
{
path: 'subdir',
loadChildren: './subdir/subdir.module#SubdirPageModule',
}
]
}
])
],
declarations: [ListPage]
})
export class ListPageModule {}
发布于 2019-06-05 03:29:00
任何时候,在另一个路由的子数组中有一个路由时,子组件和父组件都会被注入到模板中。
这是因为父组件将在(例如)全局级别使用< router-outlet >(可以在app.component.html中),而子组件将在其父模板中使用< router-outlet >。因此,您最终将同时显示这两个组件。
如果您希望在视图中看不到父组件,则需要消除列表和子目录之间的父子关系。
要做到这一点,您有两个选择:
1)将ListPage组件移动到子路由,例如list/list
或
2)将Subdir组件上移。
https://stackoverflow.com/questions/56449398
复制相似问题