时间戳

首页 > 解决方案 > 选择组件时忽略部分路由的角度路由

angular - 选择组件时忽略部分路由的角度路由

问题描述

我有一个应用程序模块，它通过这些定义的路由延迟加载其他几个模块：

appRoutes: Routes = [
  {
    path: 'campaign',
    loadChildren: './campaign/campaign.module#CampaignModule'
  },
  {
    path: 'analytics',
    loadChildren: './analytics/analytics.module#AnalyticsModule'
  },
  // .... several other routes...
  {
    path: 'not-found',
    component: NotFoundComponent
  },
  {
    path: '**',
    component: NotFoundComponent
  }
];

现在，在分析路线中，我有这个：

analyticsRoutes: Routes = [
  {
    path: 'campaign',
    component: CampaignsComponent
  },
  {
    path: 'campaign/:campaignId',
    component: CampaignComponent
  }
 // ... several other routes ...
];

最后是竞选路线：

campaignRoutes: Routes = [
  {
    path: '',
    component: JourneyListComponent
  },
  {
    path: 'journey',
    component: JourneyListComponent
  }
]

AppModule 中的路由被加载，RouterModule.forRoot(appRoutes, { onSameUrlNavigation: 'reload'})AnalyticsModule/CampaignModule 中的路由被加载如下：RouterModule.forChild(<module>Routes)

路由在整个应用程序中完美运行，直到我添加了活动模块，该模块与分析/活动具有相似的路由，但根不同。

完整的分析路线（有效）是<site-url>/analytics/campaign，完整的活动路线（无效）是<site-url>/campaign。

当我进入活动/campaign或campaign/journey路线时，它会加载在路线 def for 中指定的组件/analytics/campaign。目前，正确组件中唯一应该显示的是<h1>Hello World</h1>

如果我将延迟加载的campaign路由更改为campaigns（添加一个's'），使其与分析路由不匹配，它可以解决问题，但我不希望它在任何一个地方都是复数。

我尝试将 pathMatch 添加到所有路由（前缀和完整），但它并没有改变行为。

Package.json 部门：

"dependencies": {
    "@angular/animations": "6.0.6",
    "@angular/cdk": "^6.3.1",
    "@angular/common": "6.0.6",
    "@angular/compiler": "6.0.6",
    "@angular/core": "6.0.6",
    "@angular/forms": "6.0.6",
    "@angular/http": "6.0.6",
    "@angular/platform-browser": "6.0.6",
    "@angular/platform-browser-dynamic": "6.0.6",
    "@angular/router": "6.0.6",
    "@stomp/ng2-stompjs": "^4.0.0",
    "@swimlane/ngx-charts": "8.1.0",
    "@swimlane/ngx-datatable": "13.0.1",
    "@swimlane/ngx-ui": "21.1.2",
    "core-js": "^2.5.7",
    "d3": "^5.5.0",
    "lodash": "^4.17.10",
    "moment": "2.22.2",
    "moment-mini": "2.22.1",
    "moment-timezone": "^0.5.21",
    "mydaterangepicker": "^4.2.1",
    "ng-pick-datetime": "^6.0.7",
    "ng-pick-datetime-moment": "^1.0.6",
    "ng2-dragula": "1.5.0",
    "ng2-stomp-service": "^1.2.2",
    "ngx-monaco-editor": "^6.0.0",
    "ngx-toastr": "^8.8.0",
    "protractor": "^5.3.2",
    "rxjs": "^6.2.1",
    "rxjs-compat": "^6.2.1",
    "rxjs-tslint": "^0.1.5",
    "sockjs-client": "^1.1.5",
    "stream": "0.0.2",
    "timers": "^0.1.1",
    "xml2js": "^0.4.19",
    "zone.js": "^0.8.26"
}

标签： angularangular-routing

解决方案

在评论中回答，给我那个代表。༼つ◕_◕༽つ</p>

如果您将带有路由的延迟加载模块错误地导入应用程序模块，则会发生这种情况。这重现了这个问题：stackblitz.com/edit/angular-yrmdaj

删除应用模块中的“AnalyticsModule”导入，它将不再中断。

推荐阅读