点击 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 路径的组件。
最佳答案
尝试如下做 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']);
}
}
关于angular - routerLink 指令不适用于 mat-menu-item 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56458353/