Показать базу компонентов по URL Angular 7

Question

Мне нужно сделать следующее: На рабочем столе:

1) Откройте маршрут, есть список задач

2) Нажмите на задачу, затем увидите задачу и карту

На мобильном телефоне

1) Откройте маршрут, есть список задач

2) Нажмите на задачу, и вы увидите только выбранную задачу.

3) Нажмите на «showOnMap» внутри задачи, вы увидите только карту.

4) Нажмите обратно в браузере, чтобы увидеть задачу

5) Нажмите кнопку назад в браузере, чтобы увидеть список задач

Как чтобы сделать это в Angular 7?

я пытаюсь создать проект с дочерним маршрутом, но я не могу установить стиль css. Пример Stabblitz Добавить /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;
  }
}

Вам не нужно go вернуться на мобильный телефон, чтобы просмотреть список задач. Создать и значок, который будет отображать список задач onClick ();

Сводка, обрабатывать компонент списка задач как боковую панель, которая скрыта на мобильном устройстве и может быть переключена.

Надеюсь, это поможет .