Angular 2 Routing in neue Registerkarte laufen

Question

Ich arbeite mit einem asp.net Core-Anwendung mit angular2 und mein Routing funktioniert gut. dieser funktioniert gut.

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

, aber ich möchte, dass jede Seite Link (Router) in neuem Tab öffnen, Ist es möglich,, dass jeder Link in einem neuen Tab geöffnet ist, ohne die Seite zu aktualisieren. bitte geben Sie mir einige Vorschläge, es ist meine Anforderung.

Ich bin versucht, dies

routerLink="/Page2" replace with target="target" href="/associates" 

aber Seite alle Verweise aktualisieren.

Answer 1

Versuchen Sie dies bitte, <a target="_blank" routerLink="/Page2">

---

Update1: Benutzerdefinierte Richtlinien zur Rettung! Full-Code ist hier: 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'); 
    } 
} 

Hinweis, Fenster versehen ist und OpenLinkInNewWindowDirective erklärt unter:

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

Erste Link öffnet in neuem Fenster, zweite wird nicht:

<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! ..und Sie sind willkommen =)

Update2: Ab v2.4.10 <a target="_blank" routerLink="/Page2"> arbeitet

Answer 2

Dies scheint ein wenig verwirrt.

Wenn Sie Ihre Anwendung in einem anderen Fenster oder einer anderen Registerkarte öffnen, muss die gesamte Anwendung neu gestartet und dann von Ihrem Router ... diese URL übernommen, in eine Route konvertiert und die entsprechende Komponente geladen werden.

Dies ist genau das, was passiert, wenn Sie stattdessen nur einen Link verwenden. In der Tat ist das alles, was passiert.

Der Punkt des Routers ist es, Komponenten innerhalb und außerhalb Ihrer Router-Outlet auszutauschen, was etwas Bootstrapped ist und innerhalb der Grenzen Ihrer laufenden Anwendung existiert und nicht über mehrere Fenster geteilt wird.

Answer 3

Diese Anweisung funktioniert als [routerLink] Ersatz. Alles, was Sie tun müssen, ist Ihre [routerLink] Verwendungen mit [link] zu ersetzen. Es funktioniert mit Strg + Klick, cmd + Klick, klicken Sie in der Mitte.

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