问题描述
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" );
}
