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

2024-03-30

是否有一个参数可以提供给路由器以便路由器.navigate()将在浏览器中的新选项卡/窗口中打开?


按照指示创建路线here https://angular.io/docs/ts/latest/guide/router.html.

设置您的app-routing.module.ts(或者只是将其放入app.module.ts),放置<router-link>在你的app.component.html.

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

片段示例:

应用程序路由.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 {}

应用程序组件.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>

主要组件.ts

public testMe() {
    window.open( "openJcl" );
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 angular2 中导航到新选项卡 的相关文章

随机推荐