使用 Angular 中的参数进行路由

Question

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

第一个导航“层”是下拉列表。之后，URL是index/Param#。

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

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

基本上，您在这里所做的是，所有路由都转到阶段/：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 routes从上到下读取，第一个子路由需要一个参数＜code＞名称，其他路由从未被触摸。

'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.

Answer 2

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

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

希望这会有帮助！