Angular |响应式 |自适应 |重置配置

Question

简短的问题
使用 routes.resetConfig(newRouteArray) 切换路线的/或更好的方法有什么区别？ 对比 在 resize 事件上重新加载 Angular 应用程序并根据屏幕宽度创建 routeArray？
一个答案建议我建议的解决方案，或者被前端专家用来解决 Angular 应用程序中的此类问题，我们将不胜感激。看起来，围绕这些问题陈述或响应/自适应实现没有足够的信息/文档
注:移动和桌面应用程序将具有不同的路由/路由具有与移动/桌面应用程序不同的组件
问题解释
我试图创建一个 Angular 应用程序，它也适用于桌面浏览器和移动浏览器。因此，使组件具有响应性是需求的一个方面。但是，在移动浏览器上，某些模块或流程与桌面浏览器相比可能具有完全不同的外观或流程等。因此，我决定采用自适应方法，即

在我的 Angular 项目中维护两个模块

一款手机版，一款桌面版

移动模块及其组件将有自己的响应式样式，桌面也是如此

我认真地关注了 this blog帖子，解释说要拥有这种功能，我必须维护两组不同的路由，一个用于移动设备，一个用于桌面，如下所示:
resetConfig方式:

    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: ''}
];

然后检测屏幕大小并重置路由，如下所示:

@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);
    }
  }
}

但是，有些 blog posts/github issues指的是对子路由使用 resetConfig 也会产生其他问题。
我的方法(没有任何 resetConfig 并在屏幕加载时加载适当的路由)
我在 app.routing.module.ts 中尝试过的内容，如下

const routesToLoad = window.innerWidth >= 768 ? desktopRoutes : mobileRoutes;
 

它似乎工作正常，更详细的代码片段如下

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 之前，有条件地创建路由数组

或者有任何第三种方法可以以更明智/对开发人员友好的方式执行此操作，因此在后期维护此代码不应该是痛苦

Answer 1

一个最简单的方法应该是这样
如果您的组件需要移动版本，您可以激活 RouteGuard

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./desktop/routes.module').then(mod => mod.RoutesModule),
    canActivate: [RouterGuard]
  },
  {
    path: 'mobile',
    loadChildren: () => import('./mobile/mobile-routes.module').then(mod => mod.MobileRoutesModule)
  }
];

您的 RouterGuard 可以激活功能

export const isMobile = ()=>{
   // your mobile device detector
}

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (!isMobile) {
      return this.router.parseUrl('/mobile');
    } else {
      return true;
    }
  }
}