Angular动态菜单中实现RouterLink新标签页打开的问题

我来帮你解决这个动态菜单路由在新标签页打开的问题！你已经尝试了target="_blank"，但可能因为绑定方式或语法细节没达到预期，下面给你梳理几个靠谱的实现方案：

1. 修正基础绑定与安全属性 #

你原来的代码里有两个容易踩坑的细节：

• routerLink用了插值表达式{{subitem.state}}，Angular更推荐用属性绑定[routerLink]来处理路由，能更可靠解析动态路径
• rel属性里的no referrer是错误写法，正确的应该是noreferrer（连写），这是安全规范要求，也能确保target="_blank"正常生效

修正后的模板代码：

<li class="nav-item">
  <a [routerLink]="subitem.state" target="_blank" class="nav-link" rel="noopener noreferrer">
    <span class="title">{{subitem.moduleName}}</span>
  </a>
</li>

如果subitem.state是普通的路由字符串（比如'/dashboard'），这个写法直接就能生效。

2. 适配带参数的动态路由 #

如果你的路由需要携带参数（比如用户详情页'/user/123'），建议把subitem.state处理成数组形式（不管是后端返回还是前端加工）：

// 示例：组件中定义的菜单数据结构
layouts = [
  {
    categoryName: '用户管理',
    items: [
      {
        moduleName: '用户详情',
        state: ['/user', 123] // 数组形式：路径 + 参数
      }
    ]
  }
];

此时模板里的[routerLink]="subitem.state"会自动解析成带参数的完整路由，配合target="_blank"就能在新标签页打开对应页面。

3. 编程式导航（复杂场景首选） #

如果路由配置比较复杂（比如带查询参数、矩阵参数），或者需要额外逻辑控制，用Angular的Router服务结合window.open会更灵活：

模板修改： #

<li class="nav-item">
  <a (click)="openRouteInNewTab(subitem.state)" class="nav-link" rel="noopener noreferrer">
    <span class="title">{{subitem.moduleName}}</span>
  </a>
</li>

组件逻辑： #

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  // 你的组件元数据
})
export class YourSidebarComponent {
  constructor(private router: Router) {}

  openRouteInNewTab(route: string | any[]) {
    // 把路由转换为完整可访问的URL
    const fullUrl = this.router.serializeUrl(
      this.router.createUrlTree(route)
    );
    // 在新标签页打开
    window.open(fullUrl, '_blank');
  }
}

这种方式能覆盖所有复杂路由场景，兼容性也更好。

内容的提问来源于stack exchange，提问作者Gabriel Abreu