Angular 6导航栏routerlink重新加载组件

Question

Im using angular 6 and a routerlink in a dropdown menu in my navbar. The problem i'm facing is that routerlink isn't reloading the website and therefor not the route. When pressing a button in the dropdown it initially loads correctly, but when the user presses another button in the dropdown (while still on another child-page of the dropdown) it doesnt reload the content on the page, but changes the URL. When using Href it loads everything correctly.

<div 
  ngbDropdownMenu 
  class="dropdown-menu" 
  aria-labelledby="navbarDropdown">
  <div *ngFor="let competentie of competenties">
    <a 
      class="dropdown-item" 
      routerlink="/competenties/{{competentie.id}}">
      {{competentie.name}}
    </a>
  </div>
</div>

This forces me to use href instead of routerlink to reload the page for the component to reload and display the content with the right {{competentie.id}}.

Is there a way to navigate to another dropdown-page with routerlink and update the content on the page?

Edit

The details component:

export class CompetentieComponent implements OnInit {
competentie: Competentie;

constructor(private route: ActivatedRoute,
            private competentieService: CompetentieService,
            private location: Location
) {
}

getCompetentie(): void {
    const id = +this.route.snapshot.paramMap.get('id');
    this.competentieService.getCompetentie(id)
        .subscribe(competentie => this.competentie = competentie);
}

ngOnInit() {
    this.getCompetentie();
}
}

My route:

const routes: Routes = [
{path: 'competenties/:id', component: CompetentieComponent}
];

The service, gets it data from a class with array COMPETENTIES[]:

export class CompetentieService {

getCompetenties(): Observable<Competentie[]> {
    return of(COMPETENTIES);
}

getCompetentie(id: number): Observable<Competentie> {
    return of(COMPETENTIES.find(competentie => competentie.id === id));
}

constructor() {}
}

Answer 1

You are using this.route.snapshot.paramMap.get('id') which will only trigger just once. You should be using params instead of snapshot.paramMap.get('id') . params is a BehaviorSubject subscribing to which will give you the updated id every time it changes.

You should inject ActivatedRoute as a dependency in the same and then subscribe to params property on it.

export class CompetentieComponent implements OnInit {
  competentie: Competentie;

  constructor(private route: ActivatedRoute,
    private competentieService: CompetentieService,
    private location: Location
  ) {}

  getCompetentie(): void {
    this.activatedRoute.params.subscribe(params => {
      let latestID = +params['id'];
      this.competentieService.getCompetentie(latestID)
        .subscribe(competentie => this.competentie = competentie);
    });
  }

  ngOnInit() {
    this.getCompetentie();
  }

}

Answer 2

Try the following for dynamic routes:

<a class="dropdown-item"  [routerLink]="['/competenties/' + competentie.id]">
  {{competentie.name}}
</a>

Answer 3

add this to your code:

<a class="dropdown-item"  [routerLink]="['/competenties/' + competentie.id]">
  {{competentie.name}}
</a>