node.js - 子子路线在角度 6 中不起作用
问题描述
我的应用程序的结构是:
- 源代码
- 仪表板(主要组件)
- 部门(子组件)
添加(子子组件)
const r: Routes = [ { path: "", redirectTo:'/dashboard' ,pathMatch: 'full'}, { path: "dashboard", component: DashboardComponent, loadChildren:'./dashboard/dashboard.module#DashboardModule' }, { path: "Top-nav", component: TopNavComponent }, { path: "boxed", component: BoxedComponent }, { path: "fixed", component: FixedComponent }, { path: "collapse", component: CollapsedSidebarComponent }, ];
在 app.module.ts 中,我添加了 RouterModule.forRoot(r),下面是 dashboard.routing.module 的代码:
const routes: Routes = [
{ path: 'dashboard', component: DashboardComponent, children: [
{ path: "", component: LoginComponent },
{ path: "Calender", component: CalenderComponent },
{ path: "MailBox", component: MailBoxComponent },
{ path: "compose", component: ComposeComponent },
{ path: "Read", component: ReadMailComponent },
{ path: "tables", component: TablesComponent },
{ path: "simpleTables", component: SimpleTablesComponent },
{ path: "dataTables", component: DataTablesComponent },
{ path: "register", component: RegisterComponent },
{ path: "dash-panel", component: DashboardPanelComponent },
{path : 'department', component: DepartmentComponent}
]
}
];
@NgModule({
imports: [
RouterModule.forChild(routes),
FormsModule,
ReactiveFormsModule,
],
这是department.routing.module
const routes: Routes = [
{ path: "", redirectTo: "department", pathMatch: 'full' },
{
path: "department", component: DepartmentComponent,
children: [
{ path: 'add', component: AddComponent },
{ path: 'edit/:id', component: AddComponent },
{ path: 'view/:id', component: ViewComponent },
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
如果我渲染 htttp:localhost:4200/dashboard/department,它工作正常,但如果我渲染 htttp:localhost:4200/dashboard/department/add,我收到错误:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Component DashboardComponent is not part of any NgModule or the module has not been imported into your module.
Error: Component DashboardComponent is not part of any NgModule or the module has not been imported into your module.
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._createCompiledHostTemplate (compiler.js:23968)
at compiler.js:23944
at Array.forEach (<anonymous>)
at compiler.js:23941
at Array.forEach (<anonymous>)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:23930)
at compiler.js:23858
at Object.then (compiler.js:1012)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23857)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:23817)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._createCompiledHostTemplate (compiler.js:23968)
at compiler.js:23944
at Array.forEach (<anonymous>)
at compiler.js:23941
at Array.forEach (<anonymous>)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:23930)
at compiler.js:23858
at Object.then (compiler.js:1012)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23857)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:23817)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:3811)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
解决方案
推荐阅读
- python - 错误:AttributeError:模块“numpy”没有属性“sqrt”
- c# - SQLiteConnection 类中的“SetPassword”或“ChangePassword”在哪里?
- java - 不能将 ViewDataBinding 类用于通用 ViewHolder
- python - 如何使用嵌套列表创建 Spark 表
- macos - macOS虚拟机的CPU缓存性能比宿主机低50%左右
- wordpress - 如何修改 WooCommerce 预订中的“已付费”预订状态标签
- laravel - 在 app.js laravel 上创建全局方法 vue
- java - 为什么 java 代码没有显示正确数量的实例?
- angular - 将 ShortDate 格式从“2020/06/01”更改为“2020-06-01”
- python - 在 Windows 上读取 snappy parquet 文件会导致 python 崩溃