Question

我在后端应用程序中遇到了一个常见问题。我有几个资源可以通过咨询这种路线来查看：

报告/视图/：ID
campains /视图/：ID
suts /视图/：ID
认证/视图/：ID

请注意，路由以相同的部分结尾：/ view /：id。

我的应用模块是：

每个模块（mainlayoutModule除外）定义了它自己的路由。

App.routing

         {
            path:'certification',
            loadChildren: './+certification/certification.module#CertificationModule',
            canActivate:[AuthGuard]
        },
        {
            path:'reports',
            loadChildren: './+report/report.module#ReportModule'
            canActivate:[AuthGuard],
        },

         {
            path:'suts',
            loadChildren: './+sut/sut.module#SutModule',
            canActivate:[AuthGuard]
        },
        {
            path:'campaigns',
            loadChildren: './+campaign/campaign.module#CampaignModule',
            canActivate:[AuthGuard]
        },...

Report.routing

import { Routes, RouterModule } from '@angular/router';
import { ReportDetailsComponent } from "./ReportDetails/report-details.component";
import { ReportDetailsResolver } from "./ReportDetails/report-details.resolver";
import { ReportListComponent } from "./ReportsList/report-list.component";

export const reportRoutes: Routes = [
{
    path: '',
    pathMatch: 'full',
    redirectTo: 'list'
},
{
    path: 'view/:id',
    component: ReportDetailsComponent,
    data: {
        pageTitle: 'Report detail'
    },
    resolve: {
        report: ReportDetailsResolver
    },
    pathMatch: 'full'
},
{
    path: 'list',
    component: ReportListComponent,
    data: {
        pageTitle: 'Reports Lists'
    },
    pathMatch: 'full'
}
];

export const reportRouting = RouterModule.forChild(reportRoutes);

Campaign.routing

import { Routes, RouterModule } from '@angular/router';
import { CampaignDetailsComponent } from './campaignDetails/campaign-details.component'
import { CampaignDetailsResolver } from './campaignDetails/campaign-details.resolver'
 import { CampaignListsComponent } from './campaignList/campaign-list.component'

export const campaignRoutes: Routes = [
{
    path: 'view/:id',
    component: CampaignDetailsComponent,
    data: {
        pageTitle: 'Campaign detail'
    },
    resolve: {
        campaign: CampaignDetailsResolver
    },
    pathMatch: 'full'
},
{
    path: 'lists',
    component: CampaignListsComponent,
    pathMatch: 'full'
}
];

export const campaignRouting = RouterModule.forChild(campaignRoutes);

广告系列模块需要使用报表Component中的指令，这是代码：

@NgModule({
 imports: [
  CommonModule,
  campaignRouting,
  ReportModule
],
declarations: [CampaignDetailsComponent,CampaignListsComponent],
providers:[CampaignDetailsResolver]
})
export default class CampaignModule { }

问题在于：当我转到路线“/ campaigns / view /：id”时，路由器网点会从报表组件模块加载内容，而不是从广告系列组件中加载...

一个愚蠢的解决方案是在每个模块中都有唯一的路径（比如/ view Report /：id，/ viewCampaign /：id ...）但我想我的应用路由配置中缺少一些东西....

关于如何解决这类问题的任何想法？谢谢，奥利弗

Answer 1

我认为这里最好的解决方案可能是改变您创建应用层次结构的方式。

通过为每个模块（报告，活动和站点）使用“根”组件，您可以定义“子”路径。

以下是"Routing and Navigation"指南中的示例：

const crisisCenterRoutes: Routes = [
  {
    path: 'crisis-center',
    component: CrisisCenterComponent,
    children: [
      {
        path: '',
        component: CrisisListComponent,
        children: [
          {
            path: ':id',
            component: CrisisDetailComponent
          },
          {
            path: '',
            component: CrisisCenterHomeComponent
          }
        ]
      }
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(crisisCenterRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class CrisisCenterRoutingModule { }

此外，我建议遵循“路由模块”方式，如same guide上提供的方式：

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroListComponent }    from './hero-list.component';
import { HeroDetailComponent }  from './hero-detail.component';
const heroesRoutes: Routes = [
  { path: 'heroes',  component: HeroListComponent },
  { path: 'hero/:id', component: HeroDetailComponent }
];
@NgModule({
  imports: [
    RouterModule.forChild(heroesRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class HeroRoutingModule { }

具有相同路由的Angular2嵌套模块路由

1 个答案: