如何在 TypeScript 中使用 router.navigate 打开一个新标签页

Question

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

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

如何在新选项卡中打开 router.navigate？（即 $event.ctrlKey 为真时）

Answer 1

是的，正如您@Daneille 评论的那样，由于 durandal 的路由器插件（navigate 功能）不提供打开新选项卡的方法，因此您必须以自己的方式处理。

所以还是按你说的处理吧

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

Answer 2

我认为在 HTML link 中这样做更好

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

Answer 3

这是我的解决方案

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

Answer 4

这个适用于 # 哈希（如 https://example.com/#/users）和非哈希 url

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

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

Answer 5

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

如何在 TypeScript 中使用 router.navigate 打开一个新标签页

How to open a new tab with router.navigate in TypeScript

typescript

knockout.js

single-page-application

durandal