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

Question

The following typescript code will always open in the current browser tab

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

How do I make router.navigate open in a new tab ? (that is when $event.ctrlKey is true)

Lapidary

For now I just use: if ($event.ctrlKey) { window.open(url); } – Lapidary

Answer 1

Yes, as you @Daneille commented, you have to handle by your own way since durandal's router plugin (navigate function) does not provide a way to open a new tab.

So it is better to handle something as you commented.

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

Iced

How do I retrieve url from the Router at least? What if somebody changes routes configuration afterwards? – Inconsumable

Answer 2

this is my solution

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

Applicant

Isn't this an Angular answer? – Radicand

Admittedly I didn't see the tags on the question and just assumed they were asking about Angular based on the context of the code. Clearly it's talking about the knockout.js framework called Durandal which uses similar syntax for route navigation, hence my confusion. infoq.com/articles/durandal-javascript-framework – Applicant

Answer 3

This one works with # hash (like https://example.com/#/users) and non-hash urls

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

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

Massa

Isn't this an Angular answer? – Radicand

@Radicand I think it is by virtue of Router being an angular class. – Cahill

Answer 4

I think it is better to do in HTML link like this

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

Physiography

Answer 5

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

Newfoundland

Answer 6

Use this method as a replacement for router.navigate(...) for a new window:

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

Introgression