Angular 带参数的路由 RootPath

Question

我们正在使用 angular 4 开发一个管理面板。我们有一个模块的路由文件，如下所示：

import { Routes } from '@angular/router';

import { ShowPeriodsComponent } from './periods/show-periods/show-periods.component';
import { CreatePeriodsComponent } from './periods/create-periods/create-periods.component';
import { EditPeriodsComponent } from './periods/edit-periods/edit-periods.component';
import { ShowVideosComponent} from './videos/show-videos/show-videos.component';
import { CreateVideosComponent} from './videos/create-videos/create-videos.component';
import { EditVideosComponent} from './videos/edit-videos/edit-videos.component';
import { PeriodCommonComponent } from './periodCommon.component';


export const EvolutionsRoutes: Routes = [{
  path: '',
  component: PeriodCommonComponent,
  children: [
    {
      path: 'periods',
      children: [
        { path: '', component: ShowPeriodsComponent, data: { heading: 'Assesment Periods' } },
        { path: 'create', component: CreatePeriodsComponent, data: { heading: 'Create assesment period' } },
        { path: 'edit/:id', component: EditPeriodsComponent, data: { heading: 'Edit assesment period' } },
      ]
    } ,
    {
      path: 'videos',
      children: [
        { path: ':id', component: ShowVideosComponent, data: { heading: 'Assesment Videos' } },
        { path: 'create', component: CreateVideosComponent, data: { heading: 'Create assesment videos' } },
        { path: 'edit/:id', component: EditVideosComponent, data: { heading: 'Edit assesment videos' } },
      ]
    }
  ]

}];

然而问题从这里开始。我们的根路径是：/evolutions ，当我调用以下网址时一切正常：

/evolutions/periods
/evolutions/periods/edit/{periodId}
/evolutions/videos/{periodId}
/evolutions/videos/edit/{videoId}

但是当我在下面调用时 link

/evolutions/videos/create

页面加载失败。原因是：它调用了构造函数中的方法之一 /evolutions/videos link（我是说在 ShowVideosComponent 中）但是我不想加载 link 我只想加载与 /evolutions/videos/create link 相关的模板文件。这样的事情可能吗？

谢谢

Answer 1

不就是路径顺序问题吗？

当您键入 URL 时，您的路由器会从上到下逐条检查路由器配置中的每条路径。

您的路由器认为 /evolutions/videos/create 是您的 ShowVideosComponent 的有效路径，其中 :id = 'create'.

如果您将 videos/:id 路径放在 videos/create 路径下方，它应该可以工作。

Angular 带参数的路由 RootPath

Angular Routing RootPath With Parameters

angular

angular4-forms

angular4-router