Angular 在新选项卡中运行角度2布线

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

Associates
客户经理

我想在新选项卡中打开每个页面链接（routerLink）。是否有可能在不刷新页面的情况下，在新选项卡中打开每个链接

我试图用

target=“target”href=“/associates”

替换

routerLink=“/Page2”

，但页面会刷新所有引用。

请尝试此操作，

请注意，下面提供了窗口并声明了OpenLinkInNewIndowDirective：

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>


{{title}}

奥尔纳
OLNW-不是


多田。。欢迎你=）

更新2:从v2.4.10开始
工作
这似乎有点混乱

在另一个窗口或选项卡中打开应用程序将需要重新引导整个应用程序，然后让路由器。。。选择该url，将其转换为路由，然后加载相应的组件

如果你只是使用一个链接，就会发生这种情况。事实上，这就是正在发生的一切

路由器的要点是在路由器出口内外交换组件，这是一种已引导的组件，存在于正在运行的应用程序的范围内，不能跨多个窗口共享。
此指令可作为[routerLink]的替代品。你所要做的就是用[link]替换你的[routerLink]用法。它与ctrl+click、cmd+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
  }
}

在我的用例中，我希望异步检索一个url，然后按照该url在新窗口中访问外部资源。由于我不需要可重用性，指令似乎有些过火，所以我只是做了：

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



注:
像这样间接路由到链接可能会触发浏览器的弹出窗口阻止程序。
这一次晚了，但我刚刚发现了另一种方法：

在模板上

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

真正的问题是你为什么要这样做？它的项目要求，告诉我这是可能的还是不可能的。你试过target=“\u blank”href=“/page2”吗？但是，如果你想在新标签页中打开一个页面，并且仍然想使链接处于活动状态，这似乎是不可能的。它会刷新页面，这难道不只是重新创建一个href在重载[routerLink]属性时所做的事情吗？@nikolasleblanc我恐怕这是真的，但是，只有当
a href
和
this.win.open
相同时，我才明白。这是一扇新窗户。这是一个新的角度引导。只需使用一个链接。@nikolasleblanc我不确定当前版本，以前我们使用
时，它不会打开一个新的选项卡/窗口，而只是刷新当前选项卡/窗口。有时您确实需要这样一个链接thing@MathijsSegers确切地说，就像你想用不同的参数打开同一条路线一样。您需要重新加载页面在我的情况下，有一个产品列表页面。每个产品都有“编辑”按钮。使用这些产品的用户通常会在一个会话中编辑其中的3-4个，因此他们批量打开4个新选项卡并进行编辑比按顺序逐个编辑更容易。如何避免弹出窗口blocker@Debadatta您必须选择“允许此站点弹出窗口”。没有办法自动禁用未经同意访问您网站的所有人的弹出窗口。谢谢@Keenan，当我调试时，问题出在其他地方，谢谢提供信息。
navigateToResource(): void {
  this.service.getUrl((result: any) => window.open(result.url));
}

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

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

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