离子惰性加载子数组中的模块
离子惰性加载子数组中的模块
提问于 2019-06-05 02:24:30
我有一个离子应用程序，在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 {}回答 1
Stack Overflow用户
发布于 2019-06-05 03:29:00
任何时候，在另一个路由的子数组中有一个路由时，子组件和父组件都会被注入到模板中。
这是因为父组件将在(例如)全局级别使用< router-outlet >(可以在app.component.html中)，而子组件将在其父模板中使用< router-outlet >。因此，您最终将同时显示这两个组件。
如果您希望在视图中看不到父组件，则需要消除列表和子目录之间的父子关系。
要做到这一点，您有两个选择：
1)将ListPage组件移动到子路由，例如list/list
或
2)将Subdir组件上移。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56449398
复制相关文章
相似问题