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

來源

2016-08-25 Kungen

對不起，但是這個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)');

來源

2016-10-07 13:51:37

它並沒有爲我工作。是否有可能掀起一場猛虎機 –

[試試這個Plnkr]（http://embed.plnkr.co/c9IgBZ/） –

感謝闖入者。現在爲我工作。我想在this.router.navigate（）方法中做同樣的事情。我可以做同樣的事情嗎？ –

這是我結束了使用，以得到它的工作：

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

注：我沒有爲我父路徑''。似乎有一些與''相關的github問題作爲父路徑，但不知道它們是否適用。

來源

2018-02-13 10:13:04

Angular 2路由器 - 命名網點

回答

相關問題