Angular 2 主细节响应页面的路由

Question

我正在寻找一种方法来为移动和桌面分辨率设置不同的路由。我有材料详情页面布局。因此，当用户移动到移动设备时，用户应该看到主列表，当用户单击列表的项目时，它应该导航到详细信息页面。我想会有 2 套桌面和移动路线，我需要根据宽度加载正确的路线配置。

求推荐。

桌面版：

  const appDesktopRoutes:Routes =[
         {
            path: '',
            component: ItemListComponent,
            children: [
                {
                    path: 'item/:id',
                    component: ItemDetailsComponent
                }
            ]
        }]

手机版：

const appMobileRoutes:Routes =[
    {
        path: '',
        component: ItemListComponent,
    },
     {
        path: 'item/:id',
        component: ItemDetailsComponent
    }
]

Answer 1

您可以获得 window 的宽度，如下所示，一旦您拥有它们，您就可以使用它来隐藏模板中的详细信息组件，并更新您的详细信息列表点击行为，以导航而不是在同一页。

export class AppComponent {

  constructor(ngZone: NgZone) {
    // Initial draw
    this.drawPage(window.innerWidth);
   
    // On resize
    window.onresize = (e) => {
      ngZone.run(() => {
       this.drawPage(window.innerWidth);
      });
    };
  }

  drawPage(width){
    // use width to determine how to draw.
  }
}

更新：

您需要根据宽度重新设置路线。

试试下面，

创建一个可以给你 window 宽度的分辨率服务，

解析服务

@Injectable()
export class ResolutionService {
  constructor(ngZone: NgZone) {
    // On resize
    window.onresize = (e) => {
      ngZone.run(() => {
        this.width.next(window.innerWidth);
      });
    };
  }

  width: BehaviorSubject<number> = new BehaviorSubject<number>(window.innerWidth);
}

在您的 RouterModule 中使用上述服务来重置路由，如下所示，

AppRoutingModule

const appDesktopRoutes: Routes = [
  {
    path: '',
    component: ItemListComponent,
    children: [
      {
        path: 'item/:id',
        component: ItemDetailsComponent
      }
    ]
  }
];

const appMobileRoutes: Routes = [
  {
    path: '',
    component: ItemListComponent,
  },
  {
    path: 'item/:id',
    component: ItemDetailsComponent
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appDesktopRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {
  MOBILE_WIDTH = 500;
  constructor(router: Router, resolutionService: ResolutionService) {

    // subscribe to resolution service to get current width
    resolutionService.width.subscribe(width => {
      if (width < this.MOBILE_WIDTH) {
        router.resetConfig(appMobileRoutes);
      } else {
        router.resetConfig(appDesktopRoutes);
      }
    });

  }
}

这里是 example Plunker!!

Angular 2 主细节响应页面的路由

Angular 2 routing for master detail responsive page

angular2-routing

angular