angular - Angular 2 Routing在新选项卡中运行

我正在使用带有angular2的asp.net核心应用程序，并且路由工作正常。

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

我想在新标签页中打开每个页面链接(routerLink)。是否可以在不刷新页面的情况下在新选项卡中打开每个链接？

我试图用routerLink="/Page2"替换target="target" href="/associates"，但是页面刷新了所有引用。

最佳答案

请尝试此，<a target="_blank" routerLink="/Page2">
Update1:​​自定义指令进行救援!完整代码在这里: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');
    }
}

注意，提供了Window，并在下面声明了OpenLinkInNewWindowDirective:

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

第一个链接将在新窗口中打开，第二个链接将为而非:

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

多田..欢迎您=)

Update2:自v2.4.10起<a target="_blank" routerLink="/Page2">可以正常工作

关于angular - Angular 2 Routing在新选项卡中运行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41355830/