Angular4:路由器，子级(可选)参数 [英] Angular4: router, children (optional) parameters

问题描述

因此，我希望产生这样的路径:

So, I am looking to produce paths like these:

比赛/:页面/:球队/:赛季

matches/:page/:team/:season

其中:team和:season是可选参数所以我可以有一个像这样的网址

where :team and :season are optional parameters so I could have an url like

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

所有内容均应有效，并通过 this.route.snapshot.params

all should be valid and come through in 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作为参数通过

with no luck, only :page comes through as param

推荐答案

我认为您想考虑的事情是您真正想要的是子路线还是只是同一页面或每个级别?另一个示例将最终呈现这两个组件……这可能是您想要的，但是如果没有，那么您可能会拼出每个组件.

I think something you want to think about are you really wanting child routes or just the same page or each level? The other example will end up rendering both components ... which might be what you want, but if not then you might spell out each one.

{ 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, },

还请注意，您在路径中使用的名称就是您需要在参数选择器中使用的名称:

also note the name you use in the path is the name you need to use in the param selector:

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

示例代码

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

这篇关于Angular4:路由器，子级(可选)参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！