如何在angular中使用正确的angular路由在新选项卡中打开mat-菜单项？

Question

如何在新选项卡中打开mat-菜单项当用户点击它时，我已经尝试了下面提到的所有可能的方法，我能够在新选项卡中打开，但当前选项卡将完全空白，直到新选项卡获得数据。

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

Answer 1

在我的应用程序中，我制作了一个由按钮显示的动态菜单：

    <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;
        }
      });
    });
}

我希望它能帮助你。

问候