Angular 2 Routing Run in a New Tab

I am working with the main asp.net application with angular2 and my routing is working fine.

<a target="target" routerLink="/page1" routerLinkActive="active">Associates</a> <a routerLink="/page2" routerLinkActive="active">Account managers</a> 

I want to open each link page (routerLink) in a new tab. Is it possible that each link is opened in a new tab without refreshing the page?

I tried to replace routerLink="/Page2" with target="target" href="/associates" but the page updates all the links.

+15
source share
4 answers

Please try <a target="_blank" routerLink="/Page2">


Update1: Custom Rescue Directives! Full code here: https://github.com/anandchakru/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: A window and OpenLinkInNewWindowDirective, provided below, are provided:

 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 { } 

The first link opens in a new window, the second does not :

 <h1> {{title}} <ul> <li><a routerLink="/main/home" routerLinkActive="active" olinw007> OLNW</a></li> <li><a routerLink="/main/home" routerLinkActive="active"> OLNW - NOT</a></li> </ul> <div style="background-color:#eee;"> <router-outlet></router-outlet> </div> </h1> 

Tada! .. and welcome =)

Update 2:. Starting with version 2.4.10, <a target="_blank" routerLink="/Page2"> works

+35
source

It seems a little confused.

Opening the application in another window or tab will require re-loading, and then for your router ... pick up this URL, convert it to a route and download the corresponding component.

This is exactly what will happen if you just use the link. In fact, all this is happening.

The point of the router is to replace the components at the exit of the router and exit from it, which has been loaded and exists within your running application and is not used in different windows.

+11
source

This directive works as a replacement for [routerLink] . All you have to do is replace your [routerLink] with custom [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 } } 
+9
source

In my case, I wanted to get the URL asynchronously, and then go to that URL to an external resource in a new window. The directive seemed redundant because I didn't need reuse, so I just did:

 <button (click)="navigateToResource()">Navigate</button> 

And in my component.ts

 navigateToResource(): void { this.service.getUrl((result: any) => window.open(result.url)); } 


Remarks:

Routing to a link indirectly similar to this is likely to block browser pop-ups.

+1
source

Source: https://habr.com/ru/post/1013605/


All Articles