Angular 6：从兄弟姐妹路由到兄弟姐妹的孩子

Question

这是我项目的结构：

这是路由表：

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[];
}

在 Course-play 中，我使用 mat-sidebar，正文包含儿童课程或测验。 我希望当我点击课程详细信息中的课程时，路线将更改为孩子而不是作为父母，就像这样：

当我从课程详细信息中单击时，它正在工作，但路线停留在 /courses/: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}`);

这是代码：

课程详细信息.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 文件中的函数假设可以工作。主要问题是路由，如果我激活孩子，我希望当前的课程播放路线会改变，并且我希望从一开始就在课程详细信息中做到这一点。

Answer 1

如果你能提供一个 stackblitz 链接，调试起来会更容易，但你可以尝试添加下面显示的代码，看看它是否有效。

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: [
    Add one liner code below and see if it works.
    { path: '', redirectTo: lesson/:id, pathMatch:'full'} 
    { path: 'lesson/:id', component: CourseLessonComponent},
    { path: 'quiz/:id', component: CourseQuizComponent }]},
{ path: '**', component: PageNotFoundComponent, pathMatch: 'full', runGuardsAndResolvers: 'always' }];