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?