Angular4: router, children (optional) parameters

问题

So, I am looking to produce paths like these:

matches/:page/: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

all should be valid and come through in this.route.snapshot.params

I tried this:

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

with no luck, only :page comes through as param

回答1:

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

example code

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

回答2:

Consider the following structure:

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: [

                ]
              }
            ]
          }
        ]
      }
    ]
  }
];

Depending on in which component you inject ActivatedRoute, you will be able to access different route parameters. For example

If you inject ActivatedRoute in SeasonComponent and do the following:

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

You will see an object made of page,team and season properties.

If you do the same for PageComponent, you will get an object made of only one property, page. If u get the point, if you inject ActivatedRoute in the TeamComponent, parameters would have only 2 properties.

The fact that you listen to the Router events and then read the properties in the ActivatedRoute instance dont make a difference, because the injected instance of the ActivatedRoute class contains only the parameters that where present in the route at the moment that the component, in which the instance is being injected, was generated.

So basically, at least with this approach, is not possible to access from a component at a certain level in the component hierarchy to route parameters further down in it.

Hope it helps!

回答3:

@user2623919 answers close enough...

this is what is working for me... all the routes point to the same PageComponent and in my params I get the ones I set.... this way

{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

gives me params {page: 'results'} and

/matches/results/20

gives me params {page: 'results', team: '20'} and so on

Cheers guys

来源：https://stackoverflow.com/questions/44434933/angular4-router-children-optional-parameters

标签

angular

router