RouterLink不更新内容

我有以下组件:

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)
  }
}

在此组件中,将加载菜单,并从以下链接中的route.param设置变量:

<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>

应用程序加载很好,但内容只更新一次。单击任何一个菜单项后,将显示内容,但随后的任何单击都不会加载任何内容,因此我将失去功能。如果我在浏览器中手动操作每个链接的url,内容会根据需要加载,因此我假设链接有问题。顺便说一句,id被设置为必需的,并且正在登录到控制台,但是不会根据其值根据需要重新加载内容。

如果需要,这里是路由器:

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 { }

应存储id并将其传递给content.component.ts,以便getContent()可以使用它从响应中分析正确的内容元素:

内容.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]})
  }

}