Угловой 2 Маршрутизация в новой вкладке

Question

Я работаю с основным приложением asp.net с угловым2, и моя маршрутизация работает нормально. этот хорошо работает.

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

, но я хочу, чтобы каждая ссылка на страницу (routerLink) откроется в новой вкладке, Можно, что каждая ссылка открыта в новой вкладке без обновления страницы. , пожалуйста, дайте мне несколько предложений, мое требование.

я попытался это

routerLink="/Page2" replace with 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'); 
    } 
} 

Уведомление предоставляется окно и 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> 

Tada! ..и вы можете =)

UPDATE2: На v2.4.10 <a target="_blank" routerLink="/Page2"> работает

Answer 2

Это кажется немного запутался.

Открытие вашего приложения в другом окне или вкладке потребует перезагрузки всего вашего приложения, а затем для вашего маршрутизатора ... забрать этот URL-адрес, преобразовать его в маршрут и загрузить соответствующий компонент.

Это именно то, что произойдет, если вы просто используете ссылку. На самом деле, это все, что происходит.

Точка маршрутизатора заключается в замене компонентов на выходе маршрутизатора и выходе из него, который был загружен и существует в пределах вашего запущенного приложения и не используется в разных окнах.

Answer 3

Эта директива работает как [routerLink] замена. Все, что вам нужно сделать, это заменить ваши [routerLink] обычаями с [link]. Он работает с ctrl + click, 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 
    } 
}