时间戳

首页 > 解决方案 > Angular中移动设备和桌面的不同布局/路线

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

问题描述

我有一个懒惰的模块，我想为台式机和移动设备提供不同的体验。基本上我想要我的桌面布局，如： 桌面布局

组件1显示一个列表，用户在列表中选择一个项目，组件2将显示详细信息。我创建了名为“side”的路由器插座以显示为侧边栏。这是路由器配置：

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

在移动布局中，我希望 Component1 作为路径的内容：''，用户从列表中选择任何时间都会引导到详细信息页面（2 个单独的页面）： 在此处输入图像描述

我该怎么做？

标签： angular

解决方案

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

推荐阅读