Angular 2 Router - 命名插座 [英] Angular 2 Router - Named outlets
问题描述
文档不是很好,但我试图在同一页面/路由上有不同的路由器出口.
The documentation is not very good, but I am trying to have different router outlets on the same page/route.
我的 app.component.html 中有这个
I have this in my app.component.html
<router-outlet></router-outlet>
<router-outlet name="dashboard"></router-outlet>
我的 app.routes.ts
My app.routes.ts
{
path: '',
component: HomeComponent,
outlet: 'primary'
},
{
path: '',
component: DashboardComponent,
outlet: 'dashboard'
},
{
path: '**',
redirectTo: '404'
}
因此,在我的起始页(即example.com",而不是example.com;dashboard:dashboard")上,我想在主路由器插座中显示 Homecomponent,在 Dashboard 插座中显示我的 Dashboardcomponent.这适用于 ngrs/路由器,但由于它已被弃用,我正在尝试迁移.是否有可能没有 ;dashboard:dashboard 在 angular/router 中?
So on my startpage (i.e "example.com", not "example.com;dashboard:dashboard") I want to show the Homecomponent in the primary router outlet and my Dashboardcomponent in the Dashboard outlet. That worked with ngrs/router, but since it's deprecated I am trying to migrate. Is it possible without the ;dashboard:dashboard in angular/router?
使用此配置,我被重定向到 404.我也尝试过,但没有成功:
With this configuration I am beeing redirected to 404. I have also tried this with no luck:
{
path: '',
component: HomeComponent,
children: [
{
path: '',
component: DashboardComponent,
outlet: 'dashboard'
}
]
},
有没有人设法让命名的路由器插座工作?
Have anyone managed to get named router outlets working?
更新关于从 ngrx/router 到 angular/router 的迁移说明,您应该可以:
UPDATE Regarding to the migration notes from ngrx/router to angular/router you should be able to have this:
{
path: 'blog',
component: HomeComponent,
outlet: 'main'
},
{
path: 'blog',
component: RegisterComponent,
outlet: 'dashboard'
}
但是当我访问 example.com/blog 时,我在控制台中收到此错误:
But when I go to example.com/blog, I get this error in the console:
错误:无法匹配任何路由:'博客'
Error: Cannot match any routes: 'blog'
https://github.com/ngrx/router/blob/master/docs/overview/migration.md
推荐答案
这是我最终用来让它工作的方法:
This is what I ended up using to get it to work:
this.router.navigate([{ outlets: { detail: ['summary'] } }],
{ skipLocationChange: true, relativeTo: this.route });
注意:我的父路径没有 ''
.似乎有许多与 ''
作为父路径相关的 github 问题,但不确定它们是否适用.
Note: I don't have a ''
for my parent path. There seem to be a number of github issues related to ''
as a parent path but not sure if they apply.
这篇关于Angular 2 Router - 命名插座的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!