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-anchor resetConfig可以使用

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

条件路由配置

2 个答案: