angular 2 routing:如何强制应用程序停留在当前页面上并打开对话框

问题描述:

我正在使用angular 2.4.10。通过点击一个侧面菜单项,我使用的是路由器浏览我的网站:angular 2 routing:如何强制应用程序停留在当前页面上并打开对话框

import { ModuleWithProviders } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 

... 
import { PartsComponent } from './parts/parts.component'; 
... 

export const brambleRouting: ModuleWithProviders = 
RouterModule.forChild([ 
{ 
    path: '', 
    component: BrambleRoot, 
    canActivate: [AuthGuard], 
    children: [ 
     ... 
     {path: 'parts', component: PartsComponent}, 
     ... 
     {path: 'model-builder', component: ModelBuilderComponent} 
    ] 
} 
]); 

正如你可以看到我可以导航到使用路径和相关PartsComponent的部件组件。

现在,导航到ModelBuilderComponent的代码不是我想要的。 ModelBuilderComponent有一个包含模态弹出框的HTML文件。如何为模型构建器定义路由,以便我的应用停留在当前页面上并调用ModelBuilderComponent中的open-dialogue()函数?感谢您的帮助,迪诺。

不知道下面要解决的正确方法我的问题,但它的作品。最后,我已经添加了templateUrl到侧面菜单templateUrl:

<model-builder></model-builder> 
现在

在侧面menu.component.ts我可以运行openDialog()函数和对当前的顶部显示的模态页面而不被重定向到模型生成器页面。请随时发表评论并提出更好的解决方案。

你可以使用partsComponent和ModelBuilderComponent之间的公共服务来做到这一点。在服务中创建一个可观察变量并在ModelBuilderComponent组件中对其进行订阅,以便每当其他组件更改该变量时,就会在ModelBuilderComponent中调用该订阅方法。所以你可以做你想用它做什么都..

,你可以尝试通过导航额外的选项replaceUrl为false,skipLocationChange真

this.router.navigate(['/model-builder], { replaceUrl: false, skipLocationChange: true }); 
+0

这会停止在浏览器历史记录中记录该页面,但该链接仍然会导航到模型生成器页面。 – Dino