My parent component code:
<code> private routerEventSubscribe(): void {
this.router.events
.pipe(
takeUntilDestroyed(this.destroyRef),
filter((event): event is NavigationEnd => event instanceof NavigationEnd),
)
.subscribe((event: NavigationEnd) => {
this.handleNavigationEvent(event);
console.log('nav event')
});
}
</code>
<code> private routerEventSubscribe(): void {
this.router.events
.pipe(
takeUntilDestroyed(this.destroyRef),
filter((event): event is NavigationEnd => event instanceof NavigationEnd),
)
.subscribe((event: NavigationEnd) => {
this.handleNavigationEvent(event);
console.log('nav event')
});
}
</code>
private routerEventSubscribe(): void {
this.router.events
.pipe(
takeUntilDestroyed(this.destroyRef),
filter((event): event is NavigationEnd => event instanceof NavigationEnd),
)
.subscribe((event: NavigationEnd) => {
this.handleNavigationEvent(event);
console.log('nav event')
});
}
My child component code:
<code> // re-route to the view component
this.router.navigate(['view/engagement-details'], {
relativeTo: this.activatedRoute.parent,
skipLocationChange: false
});
</code>
<code> // re-route to the view component
this.router.navigate(['view/engagement-details'], {
relativeTo: this.activatedRoute.parent,
skipLocationChange: false
});
</code>
// re-route to the view component
this.router.navigate(['view/engagement-details'], {
relativeTo: this.activatedRoute.parent,
skipLocationChange: false
});
I don’t understand why, but routerlink in the template of another child component does trigger a navigation event, but router.navigate in the class of a different child component – changes the URL, but does not trigger this.router.events subscribed to by the parent. Any ideas where I may be going wrong?