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>

我希望它显示绑定(bind)到/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']);
      }
}