Angular 2 Routing 在新选项卡中运行 [英] Angular 2 Routing run in new tab

问题描述

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

Associates<a routerLink="/page2" routerLinkActive="active">账户管理器</a>

我想在新选项卡中打开每个页面链接 (routerLink).是否有可能每个链接都在新标签页中打开，而不刷新页面?

我尝试将 routerLink="/Page2" 替换为 target="target" href="/associates" 但页面刷新了所有引用.>

解决方案

请试试这个，

<小时>

Update1:​​ 自定义指令来救援！完整代码在这里:https://github.com/pokearound/angular2-olnw

import { Directive, ElementRef, HostListener, Input, Inject } from '@angular/core';@Directive({ 选择器: '[olinw007]' })导出类 OpenLinkInNewWindowDirective {//@Input('olinwLink') 链接:字符串；//引入一个新属性，如果独立于routerLink@Input('routerLink') 链接:字符串；构造函数(私有el:ElementRef，@Inject(Window)私有win:Window){}@HostListener('mousedown') onMouseEnter() {this.win.open(this.link || 'main/default');}}

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

import { AppAboutComponent } from './app.about.component';从 './app.default.component' 导入 { AppDefaultComponent };从 './app.pnf.component' 导入 { PageNotFoundComponent };从 './olinw.directive' 导入 { OpenLinkInNewWindowDirective };从'@angular/platform-b​​rowser' 导入 { BrowserModule };从'@angular/core' 导入 { NgModule };从'@angular/forms' 导入 { FormsModule };从'@angular/http'导入{HttpModule}；从@angular/router"导入 { RouterModule, Routes };从 './app.component' 导入 { AppComponent };const appRoutes: 路由 = [{ path: '', pathMatch: 'full', 组件: AppDefaultComponent },{ path: 'home', 组件: AppComponent },{ path: 'about', 组件: AppAboutComponent },{ 路径:'**'，组件:PageNotFoundComponent }];@NgModule({声明: [AppComponent、AppAboutComponent、AppDefaultComponent、PageNotFoundComponent、OpenLinkInNewWindowDirective],进口:[浏览器模块，表单模块，Http模块，RouterModule.forRoot(appRoutes)],提供者:[{提供:窗口，useValue:窗口}]，引导程序:[AppComponent]})导出类 AppModule { }

第一个链接在新窗口中打开，第二个将不会:

{{标题}}<ul><li><a routerLink="/main/home" routerLinkActive="active" olinw007>OLNW</a></li><li><a routerLink="/main/home" routerLinkActive="active">OLNW - 不是</a></li><div style="background-color:#eee;"><路由器插座></路由器插座>

多田！..欢迎你=)

Update2:从 v2.4.10 工作

I am working with a asp.net core application with angular2 and my routing is working fine.

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

I want to open every page link (routerLink) in a new tab. Is it possible that every link is open in a new tab, without refreshing the page?

I have tried to replace routerLink="/Page2" by target="target" href="/associates" but the page refreshes all the reference.

解决方案

Try this please, <a target="_blank" routerLink="/Page2">

---

Update1: Custom directives to the rescue! Full code is here: 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');
    }
}

Notice, Window is provided and OpenLinkInNewWindowDirective declared below:

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

First link opens in new Window, second one will 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 you are welcome =)

Update2: As of v2.4.10 <a target="_blank" routerLink="/Page2"> works

这篇关于Angular 2 Routing 在新选项卡中运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！