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