如何在 angular2 中导航到新选项卡 [英] How to navigate in angular2 to new tab

问题描述

是否有参数提供给路由器，以便 router.navigate() 将在浏览器的新标签/窗口中打开?

Is there a parameter to provide to the router so that router.navigate() will open in a new tab/window in browser?

推荐答案

按照指示创建路由 此处.

设置你的 app-routing.module.ts(或者只是把它放在 app.module.ts 中)，放置 ; 在您的 app.component.html 中.

Set up your app-routing.module.ts ( or just put it in app.module.ts ), place the <router-link> in your app.component.html.

现在，要从主页面(或您创建的任何子路由)打开一个新窗口，只需调用一个在主组件中处理的函数，该函数将指向您创建的子组件路由的 url设置新窗口.

Now, to open a new window from the main page, ( or whatever sub-routes you have created ) just call a function, handled in the main component, that will point to the url of the sub-component route that you setup for the new window.

app-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>

ma​​in.component.html

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

ma​​in.component.ts

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

这篇关于如何在 angular2 中导航到新选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！