RouterLink not updating content

Question

I have the following component:

nav.component.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css'],
  providers: [ApiService]
})
export class NavComponent implements OnInit {
menus;
id;
    constructor(private api: ApiService, private route: ActivatedRoute) { }

    ngOnInit() {
    this.route.queryParams.subscribe(queryParams => { this.id = queryParams.id });
    this.api.getMenus().subscribe(res => {this.menus = res});

    this.route.params.subscribe(routeParams => {
    this.set_id(routeParams.id)
    })
  }

  set_id(id){
    this.id = id
    console.log(this.id)
  }
}

In this component a menu is being loaded and a variable is being set from a route.param coming from the following link:

nav.component.html

<div *ngFor="let menu of menus; index as id">
    <ul>
        <li><a routerLink ="content/{{id}}" (click)="set_id(id)">{{menu['course-lesson-name']}}</a></li>
    </ul>
</div>

The app loads just fine, but the content only updates a single time. After any single menu item is clicked, the content is shown, but then I lose functionality in that any subsequent click loads nothing. If I manually manipulate the url in the browser for each link, the content loads as needed so Im assuming something is wrong with the linking. BTW, the id is being set as required and is logging to the console, but doesnt reload the content as needed based on its value.

Here is the router if needed:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ContentComponent } from './content/content.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  {path: 'content/:id', component: ContentComponent},
  {path: '', component: HomeComponent}
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

The id should be stored and passed to the content.component.ts so getContent() can use it to parse the correct content element from the response:

content.component.ts

import { Component, OnInit, OnChanges, Input } from '@angular/core';
import { ApiService } from '../api.service';
import { RouterLink, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css'],
  providers: [ApiService]
})
export class ContentComponent implements OnInit {
content;
id;
  constructor(private api: ApiService, private route: ActivatedRoute) { }

  ngOnInit(){
    this.route.queryParams.subscribe(queryParams => { this.id = queryParams.id });
    this.api.getContent().subscribe((res : any[]) => {this.content = res[this.id]})
    this.api.getContent().subscribe((res) => {this.content = res[this.id]})
  }

}

Answer 1

Yes, this is because your component isn't reloaded when a param changes in the URL. There are some pretty lengthy (and heated) GitHub issues over this on the angular GitHub. Essentially, you need to do this:

1. Inject ActivatedRoute in your component (this._route below)
2. Subscribe to the queryParams and do what you need to

Example:

this._route.queryParams.subscribe( q => {
    // Do something...
} );

• Angular 2 reload route on param change
• https://medium.com/@mvivek3112/reloading-components-when-change-in-route-params-angular-deed6107c6bb
• https://github.com/angular/angular/issues/15677
• https://github.com/angular/angular/issues/10207

The typical pattern I follow for this type of thing is to encapsulate whatever logic you need to run when the param changes into a function. Then, run that function in your ngOnInit and then right below it, subscribe to the queryParams so you can react to any updates (thus calling the same function that handled that).

Answer 2

You are not telling the router to do anything after the id is selected... For the click event in the nav.component.ts you should navigate to the selected id route.

set_id(id){
    this.router.navigate(['content/' + id ]);
}