如何在 Angular 中分离桌面和移动页面并延迟加载每个页面？

Question

我的目标是将

desktop

和

mobile

页面分开。原因是

desktop

页面用户体验流程是“滚动到部分”。同时，

mobile

页面用户体验流程是“导航到下一部分”。

问题：

1. desktop

   用户将加载

   mobile

   页面。对于

   mobile

   用户也是如此。

这是当前解决方案的可视化图：

1. 有

   main

   页面和

   get-device-type

   服务。

2. main

   页面将渲染

   desktop

   页面或

   mobile

   页面。

我尝试过的：

1. 使用

   canLoad

   来显示

   desktop

   页面。

我的期望：

1. 当

   desktop

   用户访问路径

   checkout/1

   时，会加载

   desktop

   页面。
2. 当

   mobile

   用户访问路径

   checkout/1

   时，不会加载

   desktop

   页面，而是加载

   mobile

   页面。

我的实际结果：

1. 当

   desktop

   用户访问路径

   checkout/1

   时，会加载

   desktop

   页面。
2. 当

   mobile

   用户访问路径

   checkout/1

   时，不会加载任何页面。

checkout-page-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { IsDesktopGuard } from '../../../domain/usecases/is-desktop/is-desktop.guard';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import("../checkout-scroll-page/checkout-scroll-page.module").then(m => m.CheckoutScrollPageModule),
    canLoad: [IsDesktopGuard]
  },
  {
    path: '',
    loadChildren: () => import("../checkout-navigate-page/checkout-navigate-page.module").then(m => m.CheckoutNavigatePageModule)
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CheckoutPageRoutingModule { }

Answer 1

您需要为桌面端和移动端路由指定合适的路径，目前有两个路由具有相同的路径，所以桌面端始终会先加载（最先匹配到的）

const routes: Routes = [
  {
    path: 'desktop',
    loadChildren: () => import("../checkout-scroll-page/checkout-scroll-page.module").then(m => m.CheckoutScrollPageModule),
    canLoad: [IsDesktopGuard]
  },
  {
    path: 'mobile',
    loadChildren: () => import("../checkout-navigate-page/checkout-navigate-page.module").then(m => m.CheckoutNavigatePageModule)
  }
];

如果您仍然遇到问题，请分享 stackblitz 进行调试