Блог

У меня проблема с меню, предоставляемым Angular 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-адрес в строке браузера меняется, но содержимое остается прежним.

Конечно, я могу это исправить, перезагрузив всю страницу содержимого (например, используя один из методов javascript), но я предпочитаю оптимизировать решение и загружать только выбранную часть страницы

есть идеи?

Ниже приведены части кода, отвечающие за отображение содержимого

 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)}}">amp;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)}}">amp;raquo;</a>
  </span>
</div>