angular - routerLink 指令不适用于 mat-menu-item 元素

Question

单击 mat-menu-item (Item1) 后，没有任何反应。我确信路由器配置正确，因为如果将它放在代码中的任何其他位置，它就可以工作。最奇怪的是，它正在工作，并且在刷新浏览器后它停止工作。

将其嵌套在 nav 元素中无济于事

<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 路径的组件。

Answer 1

尝试如下执行 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']);
      }
}

Answer 2

出于某种原因，两种解决方案都不起作用。但是，一旦我删除了该组件并再次创建它，它又开始工作了。

Answer 3

我遇到了同样的问题。

我的问题是，声明菜单的组件位于 Angular 模块中，该模块没有导入 RouterModule。

尝试在声明包含菜单的组件的模块中导入 RouterModule。然后它应该工作。