显示基于url Angular 7组件

Question

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

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

2)启动任务，然后then查看任务和地图

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

2)单击任务，然后只看到选定的任务。

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

5)再次在浏览器中单击上一步( ull )查看任务列表

我试着用子路由做一个项目，但我不能设置css样式。

github

这是可视化的

​

Answer 1

要实现这一点，请使Task list成为组件，并使每个任务成为组件。然后使用CSS，在移动设备上隐藏任务列表组件。

在您的路由中执行以下操作：

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

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

超文本标记语言我使用的是Bootstrap4类。

<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()的图标；

总之，将任务列表组件视为侧边栏，它在移动设备上是隐藏的，并且可以切换。

我希望这能帮到你。