[英]scrollIntoView() Doesn't work with angular Material Mat-Menu-Item
[英]How to open mat-menu-item in a new tab in angular using proper angular routing?
当用户点击它时,如何在新选项卡中打开mat-menu-items,我已尝试了下面提到的所有可能方法,我可以在新选项卡中打开但当前选项卡将完全空白,直到新选项卡获取数据。
<mat-menu #apps="matMenu" yPosition="below" xPosition="before" [overlapTrigger]="false">
<div mat-menu-item routerLink="/requests" class="appsItem mat-body-1 app-high-em">
<span>{{'Request Extracts' | translate}} </span>
<mat-icon class="float-right appsItemIcon ml-2">vertical_align_bottom</mat-icon>
</div>
<a mat-menu-item routerLink="/users" class="appsItem mat-body-1 app-high-em" appNewWindow>
<span>{{'Users' | translate}} </span>
<mat-icon class="float-right appsItemIcon ml-2">person_add</mat-icon>
</a>
<a mat-menu-item routerLink="/metadata/models" [target]="_blank" class="appsItem mat-body-1 app-high-em">
<span>{{'Meta Data' | translate}} </span>
<mat-icon class="float-right appsItemIcon ml-2">link</mat-icon>
</a>
<div mat-menu-item routerLink="/requests" class="appsItem mat-body-1 app-high-em">
<span>{{'Patient Cohorts' | translate}} </span>
<mat-icon class="float-right appsItemIcon ml-2">people</mat-icon>
</div>
<div mat-menu-item routerLink="/requests" class="appsItem mat-body-1 app-high-em">
<span>{{'Markets' | translate}} </span>
<mat-icon class="float-right appsItemIcon ml-2">public</mat-icon>
</div>
<a mat-menu-item routerLink="/queue" target="_blank" class=" mat-body-1 app-high-em">
<span>{{'Job Monitor' | translate}} </span>
<mat-icon class="float-right appsItemIcon ml-2">list_alt</mat-icon>
</a>
</mat-menu>
在我的应用程序中,我通过按钮显示了一个动态菜单:
<button mat-button [matMenuTriggerFor]="menulist"><mat-icon>menu</mat-icon>{{menuName}}</button>
<mat-menu #menulist="matMenu">
<button *ngFor="let menu of menus" mat-menu-item [routerLink]="menu.link">{{menu.name}}</button>
</mat-menu>
在ts中,我配置了不同的菜单,在路线更改时,我更改了所选菜单:
menus = [
{ name: 'Menu 1', link: '/route1', active: false },
{ name: 'Menu 2', link: '/route2', active: false }
];
constructor(
public router: Router,
private location: Location
) {
this.router.events
.pipe(filter(event => event instanceof NavigationEnd))
.subscribe(({ urlAfterRedirects }: NavigationEnd) => {
const url = urlAfterRedirects.split(';')[0];
const urlAsArray = url.split('/');
this.menus.forEach(menu => {
menu.active = urlAfterRedirects.startsWith(menu.link);
if (menu.active) {
this.menuName = menu.name;
}
});
});
}
我希望它可以帮助你。
问候
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.