Angular中移动设备和台式机的不同布局/路线

Question

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

Component1显示一个列表，用户在列表上选择一个项目，component2将显示详细信息。我创建了名为“ 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个单独的页面）：

我该怎么办？

Answer 1

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

Answer 2

我建议另一种方法。如果您知道自己何时在“移动”或“桌面”中（实际上您应该检查“screen.size”）。见，例如this SO

你可以点赞

<ng-container *ngIf="{size:commonService.resize$|async} as size">
  <div #detail *ngIf="size.size?.width>500">
  <router-outlet></router-outlet>
  </div>
</ng-container>

在您的组件中，您尝试“获取”div 详细信息

@ViewChild('detail') detail:ElementRef<any>

知道你可以检查“细节”是否存在并导航到一个或另一个方向

click(){
    if (this.detail)
       this.router.navigate('parent/child/1')
    else
       this.router.navigate('parent-child/1')

}

你的路由器定义像

const routes: Routes = [
  { path: 'parent', component: ParentComponent,children:[
       {path:'child:id', component:ChildrenComponent
   ] },
  { path: 'parent-child:id', component: ChildrenComponent },
];

但是您可以在“主”路由器出口中使用 parent-child/1 或使用 parent/child/1（在“主”路由器出口中您有“父”和路由器-“父母”的出口你有孩子）