子模块中缺少父模块路由URL

安德斯·古尔贝克(AndersGulbæk)

Angular的新手,正在尝试在模块中构建代码。我有一个管理模块响应

/管理员

请求,现在我试图将另一个子模块添加到Admin模块中,称为Portfolio Module。

除了我希望投资组合模块能够响应

/ admin / portfolio

请求。现在它对

/投资组合

要求。

在这里,我要导入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定义为子级路由。在管理路由内。

admin-routing.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 { }

这是我的投资组合模块,没什么特别的。

Portfolio.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 { }

最后是我的投资组合路由,也许我在这里错过了一些东西,告诉它包括父路由。

Portfolio-routing.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.moduleIndexComponentfor 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'
  }
]
...

Portfolio-routing.module

...
const routes: Routes = [
  {
    path: '',
    component: PortfolioIndexComponent
  },
  {
    path: 'create',
    component: PortfolioCreateComponent
  }
]
...

我还将这个示例的可工作堆叠闪电以及用于延迟加载特征模块的角度指南文档放在一起,在下面进行了链接。

https://stackblitz.com/edit/angular-bkxpsp

https://angular.io/guide/lazy-loading-ngmodules

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章