Динамические маршруты угловые7

Question

У меня следующая структура компонентов:

Компоненты:

Классы

Уроки

У меня есть следующие таблицы:

Table Class

Id | Code | Name

1 | Class_1 | Class 1

2 | Class_2 | Class 2

Table Lesson

Id | ClassId | Code | Name

1 | 1 | Lesson_1 | Lesson 1

2 | 1 | Lesson_2 | Lesson 2

3 | 2 | Lesson_1 | Lesson 1

Как создать динамические URL-адреса следующего формата?

Пример 1: localhost:4200/Classes/Class_1/Lessons/Lesson_1

Пример 2: localhost:4200/Classes/Class_1/Lessons/Lesson_2

Пример 3: localhost:4200/Classes/Class_2/Lessons/Lesson_1

Где классы и уроки являются компонентами.

Большое спасибо за вашу помощь.

Answer 1

Вы должны определить свои маршруты и выходы маршрутизатора, чтобы ваш компонент классов и компонент урока могли отображаться как дети.

В идеале ваш маршрутизатор должен выглядеть следующим образом:

const appRoutes: Routes = [
{ path: 'Classes/:classID', component: ClassesComponent , 
  children: [
  { path: "Lesson/:lessonID", component: LessonComponent},
  ]},
];

Ваш компонент ClassesComponentпринимает параметры classId, а ваш lessonComponent принимает параметр lessonID.

Определите выходной маршрутизатор внутри вашего ClassesComponent для отображения дочерних lessonComponents.

Answer 2

Вы можете достичь желаемого, используя параметры маршрута.Это лучшая практика для подражания.Взгляните на это: https://angular.io/guide/router#route-parameters