How can I navigate to an internal page using [routerLink] and target="_blank" without reload?

Question

I'm trying to navigate to an internal page using [routerLink] and target="_blank" without having the entire app reload.

I can get the page to load in another tab but the entire application reloads.

HTML:

<a [routerLink]="getRouterLink(parm1,parm2)" target="_blank">

TypeScript:

public getRouterLink = function(parm1: string , parm2: string ) : any[] {
    let link : any[] = ['/pages/myPage', {}];
    let params = {};
    params['parm1'] = parm1;
    params['parm2'] = parm2;

    link[1] = params;

    return link;
  };

Is there a way to get this to navigate to the new page without reloading the app?

Well if a new tab is opened your browser will of course reload the application. There is no way to prevent this (how would this even work?). What are you trying to achieve here? Maybe there is another solution. — Mathyn, Apr 04 '19 at 13:35
Possible duplicate of [Angular 6 routerLink on a new tab](https://stackoverflow.com/questions/54483451/angular-6-routerlink-on-a-new-tab) — wentjun, Apr 04 '19 at 13:44

score 2 · Answer 1 · answered Apr 04 '19 at 13:42

No there is absolutely no way to open the app in a new tab without reloading it.

You could create a 2nd app that is lightweight (so it loads real fast) and open that in a new tab.

Alternatively, if you were using lazy loading and opened it in a new tab it would only load the components that were need, which would be relatively fast.

score 1 · Answer 2 · answered Apr 04 '19 at 13:43

1

Is there a way to get this to navigate to the new page without reloading the app?

well no, because when you open a new tab the application will be loaded from the index.js.

answered Apr 04 '19 at 13:43

beegotsy

93
10

score 1 · Answer 3 · answered Apr 04 '19 at 13:48

I have previously answered a similar question over here. There is no way to prevent a reload due to the way Angular is bootstrapped. But in short, if you want to open it on a new tab, you should be using this on your component.ts:

const url = 'www.domain.com/pages/myPage?params=value';
window.open(url, '_blank');

or simply this on your component.html,

<a href="www.domain.com/pages/myPage?params=value" target="_blank">

However, if you must use routerLink, there are other ways, such as writing your own custom directives. Check it out over here, that person has already written a sample implementation of it.

score 0 · Answer 4 · answered Apr 05 '19 at 11:45

0

There is no way the page will not reload, the way the angular works! You can simply use

<a href="#" target="_blank">

answered Apr 05 '19 at 11:45

Shilpa Soni

306
3
7

How can I navigate to an internal page using [routerLink] and target="_blank" without reload?

4 Answers4