Question

我的路由配置出现问题。我的应用逻辑-我在控制导航的标头中有一个下拉列表。下拉菜单选项导航到页面，下拉菜单下带有额外的导航栏。单击下拉选项时，传递路由参数。问题是我需要加载不在导航栏上但在下拉导航后用作默认屏幕的组件。

第一个导航“层”为下拉列表。该网址之后是 index / Param＃。

第二个导航“层”是导航栏，该导航栏加载在具有URL index / Param＃的页面上。在这些页面上，我有组件（“默认屏幕”），该组件在url为 index / Param＃时加载。但是此组件在导航栏上没有任何链接。

当我单击导航栏上的链接时，URL变为 index / Param＃/ params 或 index / Param＃/ results 等。 My app logic

App-routing.module.ts

const routes: Routes = [
   { path: '', component: MainComponent },
   { path: 'stages', component: StagesComponent }
];

Stages-routing.module.ts

const routes: Routes = [
{ path: 'stages', component: StagesComponent, children: [
    { path: ':name', component: StageComponent },
    { path: 'programm', component: ProgrammComponent },
    { path: 'jury', component: JuryComponent },
    { path: 'finalists', component: FinalistsComponent },
    { path: 'results', component: ResultsComponent },
    { path: 'photo', component: PhotoComponent },
    { path: 'partners', component: PartnersComponent },
    { path: 'contacts', component: ContactsComponent},
    ]}
];

myService.ts

navigateTo(selectedItem) {
      this.router.navigate(['stages', selectedItem]);
     // selectedItem is dropdown value
  }

例如，当我导航到“ programm”时，Angular无法解析此路径。我该怎么办？

Answer 1

在/之后添加stages将解决您的问题。

navigateTo(selectedItem) {
      this.router.navigate(['stages/', selectedItem]);
     // selectedItem is dropdown value
  }

希望这会有所帮助！

Answer 2

基本上，您在这里所做的是所有路由都转到stages/:name，而下面的其他路由则永远不会访问，您只需要删除此行
{ path: ':name', component: StageComponent }，一切都会按预期运行

const routes: Routes = [
{ path: 'stages', component: StagesComponent, children: [
    { path: ':name', component: StageComponent }, // Delete this line
    { path: 'programm', component: ProgrammComponent },
    { path: 'jury', component: JuryComponent },
    { path: 'finalists', component: FinalistsComponent },
    { path: 'results', component: ResultsComponent },
    { path: 'photo', component: PhotoComponent },
    { path: 'partners', component: PartnersComponent },
    { path: 'contacts', component: ContactsComponent},
    ]}
];

这里的错误是Angular路由是从上到下读取的，第一个子路由期望有一个参数name，而stages/whatever之后的所有内容都会渲染StagesComponent，而其他路由则永远不会被触及。

您可以在childrend数组的末尾添加这行代码，这意味着首先将检查是否是

'stages/programm' if isn't this route go to next one
'stages/jury' if isn't this route go to next one 
...
// and so one till the end of array
// and if no child routes find then will display default component which is 'StageComponent' 

// so your routes array should be something like this
const routes: Routes = [
{ path: 'stages', component: StagesComponent, children: [
    { path: 'programm', component: ProgrammComponent },
    { path: 'jury', component: JuryComponent },
    { path: 'finalists', component: FinalistsComponent },
    { path: 'results', component: ResultsComponent },
    { path: 'photo', component: PhotoComponent },
    { path: 'partners', component: PartnersComponent },
    { path: 'contacts', component: ContactsComponent},
    { path: ':name', component: StageComponent }, // if no child routes found then display default
    ]}
];

Or you can delete this line and if user write anything else that you have in children array then redirect it to 404 page .
For more info please read docs on Angular https://angular.io/guide/router they have really good explanation of how things works in angular.

用Angular中的参数路由

2 个答案: