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"，但页面会刷新所有引用。

Answer 1

请试试，<a target="_blank" routerLink="/Page2">

Update1：救援的自定义指令！完整代码在此处：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');
    }
}

注意，提供了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">起作用

Answer 2

这似乎有点困惑。

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

如果您只是使用链接，这正是会发生的事情。事实上，所有这一切都在发生。

路由器的目的是将组件交换进出路由器插座，这是一种已经被引导的，存在于正在运行的应用程序的范围内，并且不能在多个窗口之间共享

Answer 3

最近，但是我刚刚发现了另一种替代方法：

在模板上

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

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

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

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

Answer 4

此指令用作 [routerLink] 替换。您所要做的就是用 [link] 替换 [routerLink] 用法。它适用于 ctrl +点击， cmd +点击，中间点击。

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

Answer 5

在我的用例中，我想异步获取一个URL，然后将该URL跟随到新窗口中的外部资源。一条指令似乎过大，因为我不需要可重用性，所以我只是这样做了：

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

在我的component.ts中

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

注意：

像这样间接路由到链接可能会触发浏览器的弹出窗口阻止程序。

Angular 2 Routing在新选项卡中运行

5 个答案:

注意：