条件路由配置

Question

我想提出一个回应性的申请。它应该在一个小屏幕上有一个不同的导航(一系列的屏幕向下钻到细节页面)和一个大屏幕上(左面板+一个页面上的详细信息)。

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

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

我创建了一个扑通来展示。它基本上是一个从角教程的英雄导航的副本。我创建了额外的组件app/收集器.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-anchor resetConfig

router.resetConfig([ { path：'team/:id'，组件: TeamCmp，子程序：{ path：'simple'，component: SimpleCmp }，{ path：'user/:name'，component: UserCmp }}))；

您可能需要一个虚拟配置来在应用程序启动时初始化路由器，或者使用如何将从后端呈现的参数传递给angular2引导方法来延迟初始化，直到路由配置做好准备。

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

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"事件上重新加载页面即可。