Angular 角度|响应|自适应|重置配置 简短问题

使用routes.resetConfignewRouteArray切换路由与在resize事件中重新加载角度应用程序并根据屏幕宽度创建routeArray之间的区别是什么

一个建议解决方案的答案，而不是我所建议的，或者被前端专家用来解决角度应用中的此类问题，将受到高度赞赏。看起来，围绕这些问题陈述或响应/自适应实现，没有足够的信息/文档可用

注意：移动和桌面应用程序将具有不同的路由/路由与移动/桌面应用程序具有不同的组件

已解释的问题 我试图创建一个angular应用程序，它可以在桌面浏览器和移动浏览器上运行。因此，使组件具有响应性是需求的一个方面。然而，在移动浏览器上，某些模块或进程的外观、流程等可能与桌面浏览器完全不同。因此，我决定采用自适应方法，即

在我的angular项目中维护两个模块 一个用于移动设备，一个用于桌面 移动模块及其组件将有自己的响应风格，桌面也是如此 我仔细阅读了这篇文章，文章中解释说，要拥有这种功能，我必须维护两套不同的路由，一套用于手机，另一套用于桌面，如下所示：

@NgModule({
  imports: [RouterModule.forRoot(desktop_routes, {preloadingStrategy: PreloadAllModules})],
  exports: [RouterModule]
})
export class AppRoutingModule {

  public constructor(private router: Router,
    private applicationStateService: ApplicationStateService) {

    if (applicationStateService.getIsMobileResolution()) {
      router.resetConfig(mobile_routes);
    }
  }
}

重置配置方式： 然后检测屏幕大小并重置路由，如下所示：

@NgModule({
  imports: [RouterModule.forRoot(desktop_routes, {preloadingStrategy: PreloadAllModules})],
  exports: [RouterModule]
})
export class AppRoutingModule {

  public constructor(private router: Router,
    private applicationStateService: ApplicationStateService) {

    if (applicationStateService.getIsMobileResolution()) {
      router.resetConfig(mobile_routes);
    }
  }
}

然而，一些人认为，对子路由使用resetConfig也会产生其他问题

我的方法没有任何重置配置，并在屏幕加载上加载适当的路由 我在app.routing.module.ts中尝试的内容如下

它似乎工作得很好，下面是更详细的代码片段

const desktop_routes: Routes = [
  {
    path: '', component: DesktopFrontpageComponent, children:
    [
      {path: 'product/:productName', component: ProductComponent}
    ]
  },
  {path: 'about', component: AboutComponent},
  // directs all other routes to the main page
  {path: '**', redirectTo: ''}
];

const mobile_routes: Routes = [
  {path: '', component: MobileFrontpageComponent},
  {path: 'product/:productName', component: ProductComponent},
  {path: 'about', component: AboutComponent},
  {path: 'user-profile', component: UserProfileComponent},
  // directs all other routes to the main page
  {path: '**', redirectTo: ''}
];

//see this line
const routesToLoad = window.innerWidth >= 768 ? desktopRoutes : mobileRoutes;

 @NgModule({
      imports: [RouterModule.forRoot(routesToLoad , {preloadingStrategy: PreloadAllModules})],
      exports: [RouterModule]
    })
    export class AppRoutingModule {
    
      
    }

此外，在我的app.component.ts中

我写过

window.onresize = function(){ location.reload(); }

Sso上面编写的代码将要做的是，在加载过程中，它将检测屏幕大小并加载适当的路由，如果屏幕大小发生更改，而实际用户很少会这样做，我将重新加载应用程序以确保安全

现在我的问题是关于这些方法的正确性

重置路由配置 在将路由数组传递给forRoot之前，有条件地创建路由数组 或者，还有第三种方法可以以更合理/对开发人员更友好的方式实现这一点，这样在以后的阶段维护这段代码就不会是一件痛苦的事情

---

最简单的方法应该是这样

如果组件需要移动版本，则可以激活RouteGuard

常数路由：路由=[ { 路径：， loadChildren:=>import./desktop/routes.module'.thenmod=>mod.RouteModule， 激活：[路由器守卫] }, { 路径：'移动'， loadChildren:=>import./mobile/mobile routes.module'.thenmod=>mod.MobileRoutes.module' } ]; 您的RouterGuard可以激活功能

导出常量isMobile==>{ //您的移动设备检测器 } @注射的{ providedIn:'根' } 导出类AuthGuard实现了CanActivate{ 构造函数私有路由器：路由器{} canActivatenext:ActivatedRouteSnapshot，状态：RouterStateSnashot{ 如果！isMobile{ 返回此.router.parseUrl'/mobile'； }否则{ 返回true； } } }

---

只需使用引导网格列和rows@xinthose考虑到视图以及业务逻辑、验证、应用程序的流程，在屏幕SIZESMART和桌面上的一切都可以变化，引导程序只会帮助实现响应样式。我问的是如何在不同的屏幕尺寸上加载不同的组件我使用一个叫做KendoUI的角度小部件库；它很昂贵，但它的所有小部件，包括网格，都是响应迅速且便于移动的。不过，在引导中，您可以根据当前屏幕大小隐藏和显示不同的行/列：；平板电脑大小的主细节视图变成移动大小的两个不同屏幕。这是一个场景，需要使用一种UI工具包中没有涉及的方法来实现，并且Angular文档、课程和书籍中也没有介绍这种方法。这就是为什么我认为这个问题是个好问题。

window.onresize = function(){ location.reload(); }