如何使用Angular Router的navigate方法在新标签页打开页面

嘿，我来帮你搞定这个问题！其实Angular的router.navigate本身没法直接在新标签页打开路由，但我们可以结合Angular路由的工具方法+浏览器原生的window.open来优雅实现，而且比你给出的代码更贴合SPA（单页应用）的特性。

正确的实现方式 #

我们可以先通过Angular的Router生成合法的路由URL，再用window.open在新标签页打开它，这样既不会刷新当前页面，也能正确遵循Angular的路由配置：

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

// 在组件构造函数中注入Router服务
constructor(private router: Router) {}

// 定义打开新标签页的方法
openRouteInNewTab() {
  // 生成目标路由的UrlTree（这里替换成你要跳转的路由路径，支持带参数）
  const urlTree = this.router.createUrlTree(['/user-details', 1001]);
  // 把UrlTree序列化成完整的可访问URL
  const targetUrl = this.router.serializeUrl(urlTree);
  // 在新标签页打开这个URL
  window.open(targetUrl, '_blank');
}

聊聊你给出的代码的问题 #

你写的这段代码：

this.router.navigate([]).then(result => { window.location.href = link; });

会先在当前标签页导航到空路由（一般是应用首页），然后再跳转到指定的link，这样会产生一次不必要的页面跳转，体验很不流畅。而且如果link是Angular的内部路由，用window.location.href会导致整个页面刷新，完全丢掉了SPA的优势。

额外补充：打开外部链接 #

如果你的需求是打开外部链接，那更简单，直接用window.open就好，完全不需要经过Angular的路由：

window.open('https://example.com', '_blank');

内容的提问来源于stack exchange，提问作者Gobinath M