Angular 2路由器 - 命名网点

问题描述：

文档不是很好，但我试图在同一页面/路由上有不同的路由器插座。Angular 2路由器 - 命名网点

我有这个在我的app.component.html

<router-outlet></router-outlet> 
<router-outlet name="dashboard"></router-outlet>

我app.routes.ts

{ 
    path: '', 
    component: HomeComponent, 
    outlet: 'primary' 
}, 
{ 
    path: '', 
    component: DashboardComponent, 
    outlet: 'dashboard' 
}, 
{ 
    path: '**', 
    redirectTo: '404' 
}

所以在我的起始页（即 “example.com”，而不是“的例子。 com;仪表板：仪表板“）我想在主要路由器插座中显示Homecomponent，并在仪表板插座中显示我的Dashboardcomponent。这与ngrs/router一起工作，但由于它已被弃用，我正在尝试迁移。没有角度/路由器中的仪表板：仪表板是否可能？

{ 
    path: '', 
    component: HomeComponent, 
    children: [ 
     { 
      path: '', 
      component: DashboardComponent, 
      outlet: 'dashboard' 
     } 
    ] 
},

有任何人设法得到一个名为路由器网点工作：

有了这个配置，我beeing重定向到404我还没有运气尝试这样做？

UPDATE 关于从NGRX /路由器角/路由器迁移笔记，你应该能够有这样的：

{ 
    path: 'blog', 
    component: HomeComponent, 
    outlet: 'main' 
}, 
{ 
    path: 'blog', 
    component: RegisterComponent, 
    outlet: 'dashboard' 
}

但是，当我去example.com/blog，我得到这个错误控制台：

Error: Cannot match any routes: 'blog'

https://github.com/ngrx/router/blob/master/docs/overview/migration.md

对不起，但是这个Plunker包含了太多的代码。 –

对不起，但是你知道是否有可能做到这一点？没有在网址中有很多东西。如果我在首页有4个路由器插座，我不想让url看起来像这样：example.com（dashboard：dashcmp）（menu：troll）（footer：extralongfooter）等等。 – Kungen

我很确定没有在URL中显示这些部分。 –

答

试试这个配置：

{ 
    path: 'wrap', 
    component: HomeComponent, 
    children: [ 
     { 
      path: 'dash', 
      component: DashboardComponent, 
      outlet: 'dashboard' 
     } 
    ] 
}

有：

this.router.navigateByUrl('/wrap(dashboard:dash)');

我不知道为什么需要一个网址片段（如 “包装” 我加的），但它的工作原理...

和其他人：

{ 
    path: 'blog', 
    component: HomeComponent, 
    outlet: 'main' 
}, 
{ 
    path: 'blog', 
    component: RegisterComponent, 
    outlet: 'dashboard' 
}

有：

this.router.navigateByUrl('/(main:blog)'); 
this.router.navigateByUrl('/(dashboard:blog)');

它并没有为我工作。是否有可能掀起一场猛虎机 –

[试试这个Plnkr]（http://embed.plnkr.co/c9IgBZ/） –

感谢闯入者。现在为我工作。我想在this.router.navigate（）方法中做同样的事情。我可以做同样的事情吗？ –

答

这是我结束了使用，以得到它的工作：

 this.router.navigate([{ outlets: { detail: ['summary'] } }], 
          { skipLocationChange: true, relativeTo: this.route });

注：我没有为我父路径''。似乎有一些与''相关的github问题作为父路径，但不知道它们是否适用。

Angular 2路由器 - 命名网点

相关推荐