条件路由配置

Question

我希望有一个响应的应用程序。它应该有一个不同的导航在一个小屏幕上(一系列屏幕下钻至详细页面)和一个大屏幕上(左面板详细信息在一个页面上)。

由于Angular2中的路由是在组件级别上定义的，因此我的想法是创建一个根级组件，该组件将有条件地（ngIf）包括bigScreen.component.ts或smallScreen.component.ts。然后，路由本身将在 bigScreen/smallScreen 组件中定义。不过，这似乎不起作用。

这将在控制台上产生一个错误:

Error: Component "AppContainer" has no route config.

看起来如果嵌套组件有导航配置，我必须在根组件中创建导航配置。有没有办法实现我的需求？或者应该以不同的方式实现响应路由？

Answer 1

let routeMobile = [{path:'/', name: 'Home', component: MobileHomeComponent},
  {path:'/hero/:id',      name: 'Detail',   component: detailComponent}];

let routeDesktop = [{path:'/', name: 'Home', component: DesktopComponent}]

function checkForMobile(){
  //returns true for mobile
}
let finalRoute = checkForMobile() ?  routeMobile : routeDesktop;  

@Component({ ... })
@RouteConfig(finalRoute)
export class AppComponent { }

如果您非常希望它也能响应，只需在＜code＞事件中重新加载页面即可。

Answer 2

在新路由器(< code >

router.resetConfig([
 { path: 'team/:id', component: TeamCmp, children: [
   { path: 'simple', component: SimpleCmp },
   { path: 'user/:name', component: UserCmp }
 ] }
]);

您可能需要一个虚拟配置来在应用程序启动时初始化路由器，或者使用How to pass parameters rendered from back end to angular 2 bootstrap方法来延迟初始化，直到路由配置准备就绪。

https://github.com/angular/angular/issues/11437#issuecomment-245995186 提供RC.6 Plunker