如何使用適當的角度路由以角度打開新選項卡中的mat-menu-item？

Question

當用戶點擊它時，如何在新選項卡中打開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>

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

我希望它可以幫助你。

問候