Angular 2 Routing 在新选项卡中运行

Question

我正在使用带有 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" 但页面刷新了所有参考。

原文由 coder 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

请试试这个， <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>

多田！ ..欢迎你=）

更新 2 ： 从 v2.4.10 起 <a target="_blank" routerLink="/Page2"> 有效

原文由 Anand Rockzz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

迟到了，但我刚刚发现了另一种方法：

在您的模板上，

 <a (click)="navigateAssociates()">Associates</a>

在您的component.ts上，您可以使用 serializeUrl 将路由转换为字符串，可以与 window.open() 一起使用

navigateAssociates() {
  const url = this.router.serializeUrl(
    this.router.createUrlTree(['/page1'])
  );

  window.open(url, '_blank');
}

原文由 wentjun 发布，翻译遵循 CC BY-SA 4.0 许可协议