Javascript 单击菜单项时，内容不会更改

我对Angle Material提供的菜单有问题。当我当前在与其中一个菜单项相关的页面上，并且我尝试将内容更改为另一个菜单时（通过单击该项），我看不到任何内容更改

<button mat-button [matMenuTriggerFor]="tracksMenu" style="color: white">Songs</button>
<mat-menu #tracksMenu="matMenu" yPosition="below">
  <button mat-menu-item [routerLink]="['/tracks/techno']">Techno</button>
  <button mat-menu-item [routerLink]="['/tracks/club']">Club</button>
  <button mat-menu-item [routerLink]="['/tracks/dance']">Dance</button>
</mat-menu>

}

您说URL发生了变化，因此链接似乎起作用；你能发布显示主要内容的相关部分吗？@ChrisG我已经添加了问题可能是你实际上呆在同一个组件中。最简单的解决方案是将您的逻辑移动到路由器订阅中。

constructor(private trackService: TrackService,
          private route: ActivatedRoute,
          private sanitizer: DomSanitizer) {
this.sub = this.route.params.subscribe(params => {
  this.genre = params.genre;
  this.currentPage = params.page || 1;
});

this.trackService.getTrackPageByGenre(this.genre, +this.currentPage - 1).subscribe(trackResponse => {
  this.totalNumberOfTracks = trackResponse.totalElements;
  this.numberOfPage = trackResponse.numberPage;
  this.totalNumberOfPages = trackResponse.totalPages;
  this.tracks = trackResponse.trackList;
  this.secureAllUrl(this.tracks);
});

<div class="reddit-body">
<div class="container">

<hr />
  <app-track-tile [tracks]="tracks"
                  [totalNumberOfTracks]="totalNumberOfTracks"
                  [currentPage]="currentPage"
                  [totalNumberOfPages]="totalNumberOfPages"
  >
  </app-track-tile>

<div *ngIf="totalNumberOfPages > 1" style="text-align: center;">
  <span class="pagination">
    <a *ngIf="currentPage > 1" type='button' href="app/tracks/{{genre}}/{{previousPage(currentPage)}}">&laquo;</a>
  </span>
  <span class="pagination">
    <a class="active" type='button' href="app/tracks/{{genre}}/{{currentPage}}">{{currentPage}} / {{totalNumberOfPages}}</a>
  </span>
  <span class="pagination">
    <a *ngIf="currentPage < totalNumberOfPages" type='button' href="app/tracks/{{genre}}/{{nextPage(currentPage)}}">&raquo;</a>
  </span>
</div>