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