angular - Angular 中移动设备和桌面的不同布局/路线

Question

我有一个惰性模块，我希望在桌面和移动设备上有不同的体验。基本上我想要我的桌面布局如下:

Component1 显示一个列表，用户在列表中选择一个项目，component2 将显示详细信息。我创建了名为“side”的路由器 socket 以显示为侧边栏。这是路由器配置:

const desktop_routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      {
        path: '',
        component: ListComponent,
        outlet: 'side'
      },
      {
        path: '',
        redirectTo: 'detail',
        pathMatch: 'full'
      },
      {
        path: 'detail',
        component: DetailComponent,
      }
    ]
  }

在移动布局中，我希望 Component1 作为路径的内容:''，用户从列表中选择任何时间都会导致详细信息页面(2 个单独的页面):

我该怎么做？

Answer 1

使用相同的子组件，但创建 2 个路由列表:/desktop/component2 和 /mobile/component2。然后在桌面父级中显示包含桌面布局的 component3a。在移动布局中设置路由，以便 component3a 具有单个导出并将所有页面加载到单个 router-outlet 中，如果这样有意义吗？