Angular 2 Routing run in new tab

Question

I am working with a asp net core application with angular2 and my routing is working fine    lt a target  target  routerLink   page1  routerLinkActive  active  gt Associates lt  a gt    lt a routerLink   page2  routerLinkActive  active  gt Account managers lt  a gt     I want to open every page link  routerLink  in a new tab  Is it possible that every link is open in a new tab  without refreshing the page   I have tried to replace routerLink   Page2  by target  target  href   associates  but the page refreshes all the reference

User · Answer

In my use case  I wanted to asynchronously retrieve a url  and then follow that url to an external resource in a new window  A directive seemed overkill because I don t need reusability  so I simply did    lt button  click   navigateToResource    gt Navigate lt  button gt    And in my component ts  navigateToResource    void     this service getUrl  result  any    gt  window open result url          Note   Routing to a link indirectly like this will likely trigger the browser s popup blocker

User · Answer

Try this please   lt a target   blank  routerLink   Page2  gt     Update1  Custom directives to the rescue  Full code is here  https   github com pokearound angular2-olnw  import   Directive  ElementRef  HostListener  Input  Inject   from   angular core     Directive   selector    olinw007      export class OpenLinkInNewWindowDirective          Input  olinwLink   link  string    intro a new attribute  if independent from routerLink      Input  routerLink   link  string      constructor private el  ElementRef   Inject Window  private win Window               HostListener  mousedown   onMouseEnter             this win open this link     main default              Notice  Window is provided and OpenLinkInNewWindowDirective declared below   import   AppAboutComponent   from    app about component   import   AppDefaultComponent   from    app default component   import   PageNotFoundComponent   from    app pnf component   import   OpenLinkInNewWindowDirective   from    olinw directive   import   BrowserModule   from   angular platform-browser   import   NgModule   from   angular core   import   FormsModule   from   angular forms   import   HttpModule   from   angular http   import   RouterModule  Routes   from   angular router    import   AppComponent   from    app component     const appRoutes  Routes         path      pathMatch   full   component  AppDefaultComponent        path   home   component  AppComponent        path   about   component  AppAboutComponent        path        component  PageNotFoundComponent        NgModule     declarations        AppComponent  AppAboutComponent  AppDefaultComponent  PageNotFoundComponent  OpenLinkInNewWindowDirective        imports        BrowserModule      FormsModule      HttpModule      RouterModule forRoot appRoutes         providers     provide  Window  useValue  window       bootstrap   AppComponent     export class AppModule       First link opens in new Window  second one will not    lt h1 gt        title        lt ul gt           lt li gt  lt a routerLink   main home  routerLinkActive  active  olinw007 gt  OLNW lt  a gt  lt  li gt           lt li gt  lt a routerLink   main home  routerLinkActive  active  gt  OLNW - NOT lt  a gt  lt  li gt       lt  ul gt       lt div style  background-color  eee   gt           lt router-outlet gt  lt  router-outlet gt       lt  div gt   lt  h1 gt    Tada    and you are welcome     Update2  As of v2 4 10  lt a target   blank  routerLink   Page2  gt  works

User · Answer

Late to this one  but I just discovered an alternative way of doing it    On your template     lt a  click   navigateAssociates    gt Associates lt  a gt     And on your component ts  you can use serializeUrl to convert the route into a string  which can be used with window open     navigateAssociates       const url   this router serializeUrl      this router createUrlTree    page1            window open url    blank

User · Answer

This seems a little confused    Opening your application in another window or tab will require your entire application to be re-bootstrapped  and then for your router to    pick up that url  convert it into a route  and load the appropriate component   This is exactly what will happen if you just use a link instead  In fact  that s all that s happening    The point of the router is to swap components in and out of your router-outlet  which is something that s been bootstrapped and exists within the confines of your running application and isn t shared across multiple windows

User · Answer

This directive works as a  routerLink  replacement  All you have to do is to replace your  routerLink  usages with  link   It works with ctrl click  cmd click  middle click   import  Directive  HostListener  Input  from   angular core  import  Router  from   angular router  import   from  lodash  import qs from  qs    Directive     selector    link      export class LinkDirective      Input   link  string     HostListener  click      event      onClick  event           ctrl click  cmd click     if   event ctrlKey     event metaKey           event preventDefault          event stopPropagation         window open this getUrl this link     blank         else         this router navigate this getLink this link                 HostListener  mouseup      event      onMouseUp  event           middleclick     if   event which    2            event preventDefault          event stopPropagation         window open this getUrl this link     blank                constructor private router  Router        private getLink link   any         if       isArray link           link    link             return link        private getUrl link   string       let url           if    isArray link           url   link 0         if  link 1             url          qs stringify link 1                 else         url   link            return url

[angular] Angular 2 Routing run in new tab

Note:

Examples related to angular

Examples related to typescript