时间戳

首页 > 解决方案 > 显示基于 url Angular 7 的组件

angular - 显示基于 url Angular 7 的组件

问题描述

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

1）打开一条路线，有任务列表

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

在移动

1）打开一条路线，有任务列表

2）单击任务，然后您将只看到选定的任务。

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

4）在浏览器中单击返回查看任务

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

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

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

github

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

这是可视化在此处输入图像描述

标签： angularangular7angular7-router

解决方案

为此，请将任务列表设为一个组件，并将每个任务设为一个组件。然后使用 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();

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

我希望这有帮助。

推荐阅读