如何在TypeScript中使用router.navigate打开一个新的选项卡

Question

以下 TypeScript 代码将始终在当前浏览器选项卡中打开。

navigate($data: menuItem, $event: JQueryEventObject) {
       //...
       let a = $event.currentTarget as HTMLAnchorElement;
       router.navigate(a.href);    
    }

如何使router.navigate在新标签页中打开？（当 $event.ctrlKey 为true时）

- Danielle

---

目前我只是使用以下代码： if ($event.ctrlKey) { window.open(url); } - Danielle

Answer 1

这是我的解决方案

const url = this.router.serializeUrl(this.router.createUrlTree(['/my/url/route'], { queryParams: { ...anyQueryParamsYouWantOrOmitThis } }));
window.open(url, '_blank');

- harmonickey

---

这不是一个Angular的答案吗？ - xr280xr

对我来说很有道理。如果你在谷歌搜索中输入“router.navigate”，大约98%的结果都与Angular有关。 - StackOverflowUser

诚然，我没有看到问题上的标签，只是根据代码的上下文假设它们在询问Angular。显然，它正在谈论名为Durandal的knockout.js框架，该框架使用类似的路由导航语法，因此让我感到困惑。https://www.infoq.com/articles/durandal-javascript-framework/ - harmonickey

Answer 2

这个可以处理带有#哈希标记的链接（例如https://example.com/#/users），也可以处理不带哈希标记的链接。

openInNewTab(router: Router, namedRoute) {
    let newRelativeUrl = router.createUrlTree([namedRoute]);
    let baseUrl = window.location.href.replace(router.url, '');

    window.open(baseUrl + newRelativeUrl, '_blank');
}

- Kamil Kiełczewski

---

这不是一个Angular的答案吗？ - xr280xr

@xr280xr 我认为这是由于 Router 是一个 Angular 类。 - SauerTrout

Answer 3

是的，正如 @Daneille 评论所说，你必须用自己的方式处理，因为 Durandal 的路由插件（navigate 函数）没有提供打开新标签页的方式。

因此，最好像你评论的那样处理。

if ($event.ctrlKey) { 
    window.open(url); 
}

- Thaadikkaaran

---

我该如何从路由器中检索URL？如果有人之后更改了路由配置，怎么办？ - Gherman

Answer 4

我认为最好以这种方式在HTML中创建链接

<a  style=" text-decoration: none;" [routerLink]="['your-path',param1,param2]" target="_blank"  >your label </a>

- MNF

Answer 5

this.router.navigate([]).then((result) => {
  window.open(url, '_blank');
});

- Amir dhib

Answer 6

使用此方法代替 router.navigate(...) 以打开一个新窗口：

navigateNewWindow(router: Router, commands: any[]) {
    let baseUrl = window.location.href.replace(router.url, '');
    const url = new URL(commands.join("/"), baseUrl).href
    window.open(url, '_blank');
}

- Hamidreza Vakilian