angular - 离子延迟加载子数组中的模块
问题描述
我有一个 Ionic 应用程序List Page Module
,Subdir Page Module
在Page module
. 这是文件夹结构--->list/subdir.
问题:List page module
当我导航到localhost:8100/list/subdir
而不是加载时,我总是加载问题Subdir page
。
结果:我希望在Subdir page
导航到时加载localhost:8100/list/subdir
;但相反,它加载了List page
. 我只想List page
在 URL 为localhost:8100/list
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 {}
解决方案
任何时候你在另一个路由的子数组中有一个路由,子组件和父组件都将被注入到模板中。
这是因为父组件将在(例如)全局级别(可能在 app.component.html 中)使用 <router-outlet>,而子组件将在其父模板中使用 <router-outlet>。因此,您最终会同时显示两个组件。
如果你有兴趣在视图中看不到父组件,你需要摆脱 List 和 Subdir 之间的父子关系。
为此,您有两种选择:
1) 将 ListPage 组件移动到子路由,例如 list/list
或者
2) 将 Subdir 组件移到上层。
推荐阅读
- python - 您会在集群项目中删除用于缺失值处理的特征或值吗?
- javascript - 为什么创建新订阅时扫描累加器值会重置,但使用 shareReplay(1) 时不会重置?
- jasmine - 如何在茉莉花中进行异步进程?
- regex - 如何获得正则表达式来检查字符串是否仅包含字符文字或转义序列?
- enterprise-architect - 如何以编程方式在 Enterprise Architect 中导出模板列表?
- reinforcement-learning - 如何解决策略梯度中的零概率问题?
- javascript - Puppeteer:如何使用 document.evaluate 评估 xpath?
- android - Firebase 身份验证 - 使用现有的 WP 网站凭据登录?
- shopware - 插件已加载,但下拉列表中的类别未加载
- python - 并发队列的循环垃圾收集(Python C 扩展)