Директива routerLink не работает с элементом mat-menu-item

Question

После нажатия на mat-menu-item (Item1) ничего не происходит. Я уверен, что маршрутизатор настроен правильно, потому что он работает, если положить в другом месте в коде. Самое странное, что он работал, а после обновления браузера перестал работать.

Вложение его внутри навигационного элемента не помогает

<mat-toolbar color = "primary" class = "subheader-menu mat-elevation-z4">
    <span class = "menu_button">
        <button mat-button [matMenuTriggerFor]="menu">Vehicles</button>
        <mat-menu #menu="matMenu">
            <button mat-menu-item [routerLink] = "['/example']">Item 1</button>
            <button mat-menu-item>Item 2</button>
        </mat-menu>
  </span>
</mat-toolbar>

Мне бы хотелось, чтобы отображался компонент, связанный с / example path.

Answer 1

По какой-то причине ни одно из решений не сработало.Однако, как только я удалил компонент и создал его снова, он снова начал работать.

Answer 2

Попробуйте выполнить routerLink, как показано ниже

<button mat-menu-item routerLink="example" routerLinkActive="active"> Item 1</button>

ИЛИ

Существует еще одно решение для перехода на страницу, вы можете использовать событие щелчка для пункта меню

Ваш HTML

 <button mat-menu-item (click)="navigateMenu('Item1')">Item 1</button>

Файл TS

import {Router} from '@angular/router';

constructor(private router: Router){}

navigateMenu(tag){
  if(tag === 'Item1'){
       this.router.navigate(['/example']);
      }
}