如何在angular2中导航到新选项卡

Question

是否有一个参数提供给路由器，以便在浏览器的新标签/窗口中打开 router.navigate（）？

Answer 1

像指示here一样创建路线。

设置app-routing.module.ts（或只是将其放入app.module.ts），将<router-link>放入app.component.html。

现在，要从主页面打开一个新窗口（或者您创建的任何子路径），只需调用一个在主要组件中处理的函数，该函数将指向您的子组件路径的URL设置新窗口。

示例snippits：

应用-routing.ts

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

import { MainComponent } from './main/main.component'; // main window
import { JclInfoComponent } from './jcl-info/jcl-info.component'; // new window/tab

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

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

<强> app.component.html

<router-outlet>
    <!-- Just showing you that you can put things inside this. -->
    <template ngbModalContainer></template> 
</router-outlet>

<强> main.component.html

<button (click)="testMe()">myLabel</button>

<强> main.component.ts

public testMe() {
    window.open( "openJcl" );
}

Answer 2

this.router.navigate([]).then(result => {  window.open(`/example/test/${my_var}`, '_blank'); });

Angular 2 Routing navigate run in new tab(Use Angular Router naviagte )