条件路由配置

Question

我想要一个响应式应用程序。它应该在小屏幕（一系列屏幕以深入了解详细信息页面）和大屏幕（左侧面板 + 单个页面上的详细信息）上具有不同的导航。

实际上，我想加载不同的组件并根据屏幕/窗口大小进行不同的路由配置。而且我希望能够在它们之间动态切换，因为窗口的大小被调整到高于/低于某个阈值。

由于 Angular2 中的路由是在组件级别定义的，我的想法是创建一个根级别组件，它会有条件地 (ngIf) 包含 bigScreen.component.ts 或 smallScreen.component.ts。然后将在 bigScreen/smallScreen 组件中定义路由本身。这似乎不起作用。

我创建了一个plunk 来展示。它基本上是 Angular 教程中英雄导航的副本。我创建了附加组件 app/container.component.ts 作为根组件引导。然后嵌入 AppComponent（教程中的根组件），其中包含路由配置。

这会在控制台上产生错误：

Error: Component "AppContainer" has no route config.

如果嵌套组件有导航配置，我必须在我的根组件中创建导航配置。有没有办法解决它来实现我所需要的？还是应该以不同的方式实现响应式路由？

Answer 1

在新路由器(>= RC.3)https://angular.io/docs/js/latest/api/router/index/Router-class.html#!#resetConfig-anchorresetConfig可以使用

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

您可能需要一个虚拟配置来在应用启动时初始化路由器，或者使用How to pass parameters rendered from backend to angular2 bootstrap method 延迟初始化，直到准备好路由配置。

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

Answer 2

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 { }

如果您也非常希望它具有响应性，只需在 "resize" 事件上重新加载页面即可。