显示基于 url Angular 7 的组件

Question

我需要这样做： 在桌面上：

1) 打开一个路由，有任务列表

2）点击任务，然后会看到任务和地图

在手机上

1) 打开一个路由，有任务列表

2) 点击任务，然后就只能看到选中的任务了。

3) 点击任务内的“showOnMap”，你只能看到地图。

4) 在浏览器中点击返回会看到任务

5) 再次在浏览器中单击返回会看到任务列表

如何在 Angular 7 中做到这一点？

我尝试使用子路由制作一个项目，但我无法设置 css 样式。 stackblitz example 添加 /1/map 内部服务 url，如 https://owainwpmw.github.stackblitz.io/1/map

github

也许你会给出更好的解决方案？

这里是可视化

Answer 1

要实现这一点，请将任务列表设为一个组件，并将每个任务设为一个组件。然后用 CSS，在移动端隐藏任务列表组件。

在你的路由中这样做：

{
    path: 'task', component: TaskListComponent,
    children: [
      {
        path: ':taskId',
        component: TaskComponent
      },
    ]
}

上面的代码会将任务组件作为任务列表组件的子组件加载。

HTML 我使用了 bootstrap 4 类。

<div class="container">
 <div class="lists"> Code for your task list </div>
 <div class="tasks">
   <router-outlet></router-outlet>
 </div>
</div>

CSS

这个CSS只是一个例子，你应该根据你想要的视图来编写。

 .lists {
   width: 50%;
   float: left;
  }
  .tasks{
   width: 50%;
   float: right;
  }

@media screen and (max-width: 600px) {
  .lists {
    display: none;
  }
  .tasks {
    width: 100%;
    float: none;
  }
}

您无需返回移动设备即可查看任务列表。创建将显示任务列表的图标 onClick();

总结一下，把任务列表组件当成侧边栏，在移动端隐藏，可以切换。

我希望这会有所帮助。