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

【问题标题】：routerLink directive does not work with mat-menu-item elementrouterLink 指令不适用于 mat-menu-item 元素
【发布时间】：2021-11-08 21:28:59
【问题描述】：

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

【问题讨论】：

标签： angular angular-routing angular-material-7

【解决方案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']);
      }
}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

我遇到了同样的问题。

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

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

【讨论】：