I have the following code in my application. The navigation works when clicked on the anchor element the first time. It loads the corresponding target component and everything is good. However, when I click on the anchor element again, the url in the address bar changes but the corresponding target component does not fire. Why is this happening?
<div class="nav-features-content">
<div>
<div class="sideNav-header">WALLS</div>
<ul>
<li *ngFor="let wall of walls">
<a [routerLink]="['/wall', wall.ViewItem_Id]"> {{wall.Title}}</a>
</li>
</ul>
</div>
</div>
Turns out, we need to subscribe to the params in the target component, like so
private sub: any;
ngOnInit(): void {
this.sub = this._route.params.subscribe(params => {
console.log(this._route.params.value.id);
});
}
ngOnDestroy() {
this.sub.unsubscribe();
}