Angular2 Routing在新窗口中運行

問題描述

main.component.html

<a routerLink="/about"> About </a>
複製代碼

在上面到例子中，想解決以下問題：

如何路由導航到新選項卡（新窗口）？

或者說如何使router.navigate（）將在瀏覽器的新選項卡/窗口中打開？

解決方法

假設路由已配置完成，以下例子：

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { MainComponent } from './main/main.component';        // main window
import { AboutComponent } from './about/about.component';     // new window/tab

const appRoutes: Routes = [
    { path: '', component: MainComponent },                   // main route
    { path: 'about', component: AboutComponent }              // new window route
];

@NgModule({
    imports: [
        RouterModule.forRoot( appRoutes )
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule {}
複製代碼

app.component.html

<router-outlet></router-outlet>
複製代碼

方法一

使用<a>標籤的 target 屬性

main.component.html

<a target="_blank" routerLink="/about"> About </a>
複製代碼

方法二

使用window.open()方法

main.component.html

<button (click)="gotoAbout()"> About </button>
複製代碼

main.component.ts

gotoAbout(){
     window.open( "about" );
}
複製代碼

參考連接

Angular 2 Routing run in new tab

How to navigate in angular2 to new tab