主详细信息响应页面的 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

您可以像下面这样获得窗口的宽度，一旦有了它们，您就可以使用它来隐藏模板中的详细信息组件，并更新详细信息列表的点击行为，以导航而不是在同一页面中打开。

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

更新：

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

试试下面，

创建一个可以为您提供窗口宽度的分辨率服务，

ResolutionService

@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！！