Angular4: router, children (optional) 参数

Question

所以，我希望生成如下路径：

matches/:page/:team/:season

其中 :team 和 :season 是可选参数所以我可以有一个 url 像

matches/results/4/2017 or
matches/results/4 or
matches/results

所有都应该有效并在 this.route.snapshot.params

中通过

我试过这个：

  {path: 'matches', children: [
    {path: '', pathMatch: 'full', redirectTo: 'fixtures'},
    {path: 'competitions', component: CompetitionsPageComponent},
    {path: ':page', component: PageComponent, children: [
      {path: ':team', children:[
          {path: ':season', children:[]}
      ]}
    ]},
  ]},

运气不好，只有 :page 作为参数通过

Answer 1

考虑以下结构：

const paths: Routes = [
  {
    path: 'matches',
    children: [
      { path: '', pathMatch: 'full', redirectTo: 'fixtures' },
      { path: 'fixtures', component: FixturesComponent },
      { path: 'competitions', component: CompetitionsPageComponent },
      {
        path: ':page',
        component: PageComponent,
        children: [
          {
            path: ':team',
            component: TeamComponent
            children: [
              {
                path: ':season',
                component: SeasonComponent,
                children: [

                ]
              }
            ]
          }
        ]
      }
    ]
  }
];

根据您注入的组件 ActivatedRoute，您将能够访问不同的路由参数。例如

如果您在 SeasonComponent 中注入 ActivatedRoute 并执行以下操作：

this._route.params.subscribe(p => console.log(JSON.stringify(p)));

您将看到一个由页面、团队和季节属性组成的对象。

如果您对 PageComponent 执行相同的操作，您将得到一个仅由一个属性页组成的对象。如果你明白了，如果你在 TeamComponent 中注入 ActivatedRoute，参数将只有 2 个属性。

您监听 Router 事件然后读取 ActivatedRoute 实例中的属性这一事实没有什么不同，因为 注入的实例 ActivatedRoute class 包含仅生成组件时出现在路由中的参数，实例被注入其中。

所以基本上，至少使用这种方法，不可能从组件层次结构中特定级别的组件进行访问以在其中进一步向下路由参数。

希望对您有所帮助！

Answer 2

我认为您想考虑的事情是您真的想要子路由还是只需要同一页面或每个级别？另一个示例将最终渲染两个组件……这可能是您想要的，但如果不是，那么您可能会拼出每个组件。

{ path: 'matches/results/', component: ResultsComponent, },
{ path: 'matches/results/:page/', component: PageComponent, },
{ path: 'matches/results/:page/:team/', component: TeamComponent, },
{ path: 'matches/results/:page/:team/:season', component: PageComponent, },

另请注意您在路径中使用的名称是您需要在参数选择器中使用的名称：

params['page']
params['team']
params['season']

示例代码

this.route.params.subscribe((params) => {
    this.teamService.getTeam(params['team']).subscribe((team) => {
        this.team = team;
    });
});

Answer 3

@user2623919 回答足够接近...

这就是对我有用的...所有路由都指向同一个 PageComponent 并且在我的参数中我得到了我设置的那些.... 这样

{path: 'matches', children: [
  {path: '', pathMatch: 'full', redirectTo: 'fixtures'},
  {path: 'competitions-table', component: CompetitionsPageComponent},
  {path: ':page', component: PageComponent},
  {path: ':page/:team', component: PageComponent},
  {path: ':page/:team/:competition', component: PageComponent},
  {path: ':page/:team/:competition/:season', component: PageComponent}
]},

/matches/results

给我参数 {page: 'results'} 和

/matches/results/20

给我params {page: 'results', team: '20'}等等

伙计们干杯

Angular4: router, children (optional) 参数

Angular4: router, children (optional) parameters

router

angular