Как открыть mat-menu-item в новой вкладке под углом, используя правильную угловую маршрутизацию?

Question

Как открыть элементы mat-menu в новой вкладке, когда пользователь нажимает на нее, я перепробовал все возможные способы, упомянутые ниже, могу открыть в новой вкладке, но текущая вкладка становится полностью пустой до новая вкладка получает данные.

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

и в тс я настроил разные меню и при смене маршрута меняю выбранное меню:

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

Надеюсь, это поможет вам.

Привет