angular - 如何在angular2中导航到新标签

标签 angular angular2-routing

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

最佳答案

按照指示创建路线 here .

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

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

示例片段:

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" );
}

关于angular - 如何在angular2中导航到新标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41096375/

相关文章:

angular - 如何在 Angular 2 中访问组件树

angular - 有什么方法可以改变 Angular 5 HttpInterceptor 中的响应吗?

javascript - 删除带有指令的特殊字符, Angular 不起作用

javascript - 将文件夹作为另一个项目的依赖项后,如何删除 angular2 中的路由?

angular - 如何在 angular2 中获取之前的路线,以便经过一些处理后导航回到之前的 url

javascript - 将第一项订阅数据传递给服务

angular - 检查FormGroup是否已经提交

javascript - 如何检测 Angular 2 中的 URL 变化?

javascript - 单元测试时,无法在 Angular RC 5 中解析路由器 : (?、?、?、?、?、?、?) 的所有参数

Angular2嵌套路由器导出