Это структура моего проекта:
Это таблица маршрутизации:
const appRoutes: Routes = [
{ path: '', redirectTo: '/courses', pathMatch: 'full', runGuardsAndResolvers: 'always' },
{ path: 'courses', component: CourseListComponent, pathMatch: 'full', runGuardsAndResolvers: 'always' },
{ path: 'courses/:id', component: CourseDetailComponent, pathMatch: 'full', runGuardsAndResolvers: 'always' },
{ path: 'courses/:id/unit/:unit', component: CoursePlayComponent, pathMatch: 'full', runGuardsAndResolvers: 'always',
children: [
{ path: 'lesson/:id', component: CourseLessonComponent},
{ path: 'quiz/:id', component: CourseQuizComponent }
]},
{ path: '**', component: PageNotFoundComponent, pathMatch: 'full', runGuardsAndResolvers: 'always' }];
Это мои интерфейсы:
export interface ICourse {
id: number;
title: string;
author: string;
course_details: string;
units: IUnit[];
}
export interface IUnit {
id: number;
course_id: number;
position: number;
name: string;
videos: IVideo[];
quiz: IQuiz;
}
export interface IVideo {
id: number;
unit_id: number;
unit_position: number;
position: number;
name: string;
data: string;
}
export interface IQuiz {
id: number;
unit_id: number;
unit_position: number;
name: string;
questions: IQuestion[];
}
В игре "Курс" я использую боковую панель циновки, а тело содержит урок или викторину для детей.Я хочу, чтобы, когда я нажимал на урок в поле «Сведения о курсе», маршрут изменялся на ребенка, а не оставался в качестве родителя, например:
Когда я нажимаю на детали курса, он работает, но маршрут остается / курсы /: id / unit /: unit_id и не меняется на /courses/:id/unit/:unit_id/lesson/:lesson_id.
РЕДАКТИРОВАТЬ: Я попытался написать это в компоненте Course-Play, и я получил страницу не найдена:
this.router.navigateByUrl(`/courses/${this.course.id}/unit/${unitPosition}/lesson/${lessonPosition}`);
Это код:
course-detail.html:
<!-- Body -->
<div id="course_detail" class="row justify-content-lg-center">
<ngb-tabset>
<!-- Tab Content -->
<ngb-tab title="Curiculum" id="Curiculum">
<ng-template ngbTabContent>
<h5>Course Overview</h5>
<div *ngFor="let unit of course.units">
<h6>Unit {{ unit.position }}: {{ unit.name }}</h6>
<ul *ngFor="let lesson of unit.videos">
<a class="course_detail_item" [routerLink]="['unit', unit.position]"
(click)="setLessonPosition(lesson.position)"><li>Lesson {{lesson.id}}:
{{lesson.name}}</li></a>
</ul>
</div>
</ng-template>
</ngb-tab>
<ngb-tab title="About" id="About">
<ng-template ngbTabContent>
<h5>About this course</h5>
<h6>Course Topics:</h6>
<p>{{course.course_details}}</p>
<h6>Course Expectations:</h6>
<ul>
<li> Watch {{getLength(course)}} videos</li>
</ul>
<h6>Additional Resources:</h6>
<ul><li> see Labguru for more details </li></ul>
</ng-template>
</ngb-tab>
</ngb-tabset>
<div>
<!-- Enable routing to course-play html page -->
<router-outlet></router-outlet>
course-play.html
<mat-sidenav-container fullscreen *ngIf="course">
<mat-sidenav #sidenav mode="side" class="app-sidenav">
<mat-toolbar id="sidenav" color="primary">
<span class="toolbar-filler">
<h3 class="logo-title">{{course.title}}</h3>
</span>
<button mat-icon-button (click)="sidenav.toggle()" class="mat-icon-button sidenav-
toggle-button" [hidden]="!sidenav.opened">
<mat-icon aria-label="Menu" class="material-icons">close</mat-icon>
</button>
</mat-toolbar>
<mat-nav-list *ngFor="let unit of course.units">
<h6 class="course-list-title">Unit {{ unit.position }}: {{ unit.name }}</h6>
<a mat-list-item *ngFor="let lesson of unit.videos" class="sidenav-link course-item"
[routerLink]="['/courses' , course.id , 'unit' , unit.position , 'lesson' ,
lesson.position]" (click)="sidenav.toggle()"
(click)="getCurrent(unit.position,lesson.position)">
<span mat-line class="title">Lesson {{lesson.id}}: {{lesson.name}}</span>
</a>
<a mat-list-item *ngIf="unit.quiz" class="sidenav-link course-item" [routerLink]="
['/courses' , course.id , 'unit' , unit.position , 'quiz' , unit.quiz.id]"
(click)="getQuiz(unit.position)" (click)="sidenav.toggle()"
(click)="getQuiz(unit.position)">
<span mat-line class="title">Quiz</span>
</a>
</mat-nav-list>
</mat-sidenav>
<mat-toolbar id="appToolbar" color="white">
<button mat-icon-button (click)="sidenav.toggle()" class="mat-icon-button sidenav-toggle-button" [hidden]="sidenav.opened">
<mat-icon aria-label="Menu" class="material-icons">menu</mat-icon>
</button>
</mat-toolbar>
<div class="course-body container-fluid text-center">
<course-lesson *ngIf="showLesson === true" [lesson]="current" [totalLesoons]="totalLesoons"></course-lesson>
<quiz-course *ngIf="showQuiz === true" [questions]="currentUnitQuiz?.questions" [quizName]="currentUnitQuiz?.name"></quiz-course>
<router-outlet></router-outlet>
</div>
</mat-sidenav-container>
ПРИМЕЧАНИЕ: Я добавил только html-файлы, потому что функции в ts-файлах должны работать.Основная проблема с маршрутизацией, я хочу, чтобы текущий маршрут игры изменился, если я активирую ребенка, и я хочу с самого начала, когда в деталях курса это будет сделано.