angular - 子模块中缺少父模块路由 url
问题描述
Angular 新手并尝试在模块中构建我的代码。我有一个管理模块响应
/行政
请求,现在我正在尝试将另一个子模块添加到管理模块,称为投资组合模块。
这有效,除了我想要投资组合模块来响应
/管理员/投资组合
要求。现在它回应
/文件夹
而是请求。
我在这里导入 PortfolioModule
admin.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminRoutingModule } from './admin-routing.module';
import { IndexComponent } from './shared/index/index.component';
import {PortfolioModule} from './portfolio/portfolio.module';
@NgModule({
declarations: [IndexComponent],
imports: [
CommonModule,
PortfolioModule,
AdminRoutingModule
]
})
export class AdminModule { }
认为我可能需要将 PortfolioModule 定义为子路由。在管理路线内。
管理员路由.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IndexComponent } from './shared/index/index.component';
const routes: Routes = [
{
path: 'admin',
component: IndexComponent,
children: [
{
path: 'portfolio',
/*Maybe add Portfolio Module here?*/
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class AdminRoutingModule { }
这是我的投资组合模块,没什么特别的。
投资组合.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PortfolioRoutingModule } from './portfolio-routing.module';
import { IndexComponent } from './index/index.component';
import { CreateComponent } from './create/create.component';
import { ListComponent } from './list/list.component';
import { UpdateComponent } from './update/update.component';
@NgModule({
declarations: [IndexComponent, CreateComponent, ListComponent, UpdateComponent],
imports: [
CommonModule,
PortfolioRoutingModule
]
})
export class PortfolioModule { }
最后是我的投资组合路由,也许我在这里遗漏了一些东西,告诉它包含父路由。
投资组合路由.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IndexComponent } from './index/index.component';
import { ListComponent } from './list/list.component';
import { CreateComponent } from './create/create.component';
import { UpdateComponent } from './update/update.component';
const routes: Routes = [
{
path: 'portfolio',
component: IndexComponent,
children: [
{
path: 'list',
component: ListComponent
},
{
path: 'create',
component: CreateComponent
},
{
path: 'update',
component: UpdateComponent
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class PortfolioRoutingModule { }
解决方案
当您延迟加载时,路径的根模块应该在声明延迟加载模块的模块的路由中。
例如,path: 'portfolio'
将在 中声明为路由,admin-routing.module
而您的IndexComponent
forportfolio-routing.module
将有一个空路径 ( path: ''
)。此外,该children
属性可能不是必需的,因为所有路线都在同一级别。
您的路由可能看起来像这样。
应用程序路由模块
...
const routes: Routes = [
{
path: 'admin',
loadChildren: './admin/admin.module#AdminModule'
}
]
...
admin-routing.module
...
const routes: Routes = [
{
path: '',
component: AdminIndexComponent
},
{
path: 'portfolio',
loadChildren: './portfolio/portfolio.module#PortfolioModule'
}
]
...
投资组合路由模块
...
const routes: Routes = [
{
path: '',
component: PortfolioIndexComponent
},
{
path: 'create',
component: PortfolioCreateComponent
}
]
...
我还将下面链接的这个示例的工作堆栈闪电战与延迟加载功能模块的角度指南文档放在一起。
推荐阅读
- python - 创建类似于 scipy 的 OptimizedResult 的数据类型
- python - Python get-pip.py 失败,因为站点包不可写且 SSL 不可用,虽然它们看起来不错
- java - 我是否正确创建了一个布尔类?如何修复“非法开始表达”和“;” 我的代码中的预期错误?
- authentication - 当服务器以端口偏移启动时,WSO2IS-5.11.0 中的 Myaccount 和 Console 应用程序无法正常工作
- python - SAS:proc http 工作 - Python 中的 request.get 没有 - 为什么?
- python - 如何自动更改对象的显示?[Python]
- firefox - Firefox:Firefox 阻止此页面自动重新加载
- mysql - 无法通过 tcp 连接 mysql 服务器 NDB 集群
- javascript - react-native 中的条件语句
- python - 为什么我不能使用 python 查询 Influxdbv2 数据?