Angular : How can I get parent component with child routes to react to URL changes (which include child route param changes)?

Viewed 375

This is my current route setup. (Note: ScheduleComponent is loaded by the main app when we want to see the Schedule screen) ScheduleComponent has a <route-outlet> for the child routes.

const routes: Routes = [
  {
    path: '',
    component: ScheduleComponent,
    data: {
      screenName: 'schedule',
    },
    children: [
      { path: '', redirectTo: 'ABC', pathMatch: 'full' },
      {
        path: ':service',
        component: ScheduleTilesContainerComponent,
        data: {
          screenName: 'schedule',
        },
      },
      {
        path: ':service/:year/:month/:day',
        component: ScheduleTilesContainerComponent,
        data: {
          screenName: 'schedule',
        },
      },
    ],
  },
];

In ScheduleComponent I have:

// this._route: ActivatedRoute (in constructor)
this._route.params.subscribe((params: Params) => {
 console.log('Schedule params: ', params);
}

In ScheduleTilesContainerComponent I have:

// this._route: ActivatedRoute (in constructor)
this._route.params.subscribe((params: Params) => {
 console.log('Tiles Container params: ', params);
}

SCENARIO A:

When we put this in the browser: http://myserver.com/schedule We see this in the console:

Schedule params: {}
Schedule params: {service: "ABC"}
TileContainer params: {service: "ABC"}

Then a user interaction triggers this: this._router.navigate(['schedule/ABC/2020/03/25']);

Then we see in the browser address bar: http://myserver.com/schedule/ABC/2020/03/25 We see this in the console:

TileContainer params: {service: "ABC", year: "2020, month: "03", day: "25"}

Then a user interaction triggers this: this._router.navigate(['schedule/ABC/2020/03/11']); Then we see in the browser address bar: http://myserver.com/schedule/ABC/2020/03/11 We see this in the console:

TileContainer params: {service: "ABC", year: "2020, month: "03", day: "11"}

Question 1: How come the ScheduleComponent is not seeing the params observable stream trigger when we navigate()?

Continuing... Then I click the BACK button: We see in the browser address bar: http://myserver.com/schedule/ABC/2020/03/25 (correct previous URL) We see this in the console:

TileContainer params: {service: "ABC", year: "2020, month: "03", day: "25"}

Question 2: How come the ScheduleComponent is not seeing the params observable stream trigger here as well? (it's probably the same issue)


SCENARIO B

HOWEVER, if THIS is the way we enter the screen, then the ScheduleComponent DOES get the param stream!

Put this into the browser directly: http://myserver.com/schedule/ABC/2020/03/25

Schedule params: {}
Schedule params: {service: "ABC", year: "2020, month: "03", day: "25"}
TileContainer params: {service: "ABC", year: "2020, month: "03", day: "25"}

Then a user interaction triggers this: this._router.navigate(['schedule/ABC/2020/03/11']);

Schedule params: {service: "ABC", year: "2020, month: "03", day: "11"}
TileContainer params: {service: "ABC", year: "2020, month: "03", day: "11"}

If we click the BACK button the prev URL shows... We this this in the console:

Schedule params: {service: "ABC", year: "2020, month: "03", day: "25"}
TileContainer params: {service: "ABC", year: "2020, month: "03", day: "25"}

Question 3: Why does the ScheduleComponent's param stream see this change?

Question 4: How can I get my ScheduleComponent to ALWAYS see the URL update?

0 Answers
Related