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>

OR

还有另一种导航到页面的解决方案，您可以将click事件用于菜单项

您的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

由于某种原因，这两种解决方案均无效。但是，一旦我删除了该组件并再次创建它，它就会再次开始工作。

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

2 个答案: