Разрешение маршрутизатора Angular 6 - компонент не вызывается

Question

Следующее - мое решение, которое я определил на маршруте.

@Injectable({
    providedIn: 'root'
})
export class CourseDetailResover implements Resolve<Observable<[Course, (Lesson[])]>>  {

    constructor(private coursesService: CoursesService) { }

    resolve(route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable<[Course, (Lesson[])]> {
            return this.coursesService.findCourseByUrl(route.params['id'])
            .pipe(
                tap(data => console.log(data)),
                switchMap(
                    course => this.coursesService.findLessonsForCourse(course.id)
                        .pipe(
                             tap(data => console.log(data)),
                            map<Lesson[], [Course, Lesson[]]>(lessons => [course, lessons]),
                            tap(data => console.log(data))
                        )
                )
            );
    }
}

Мой маршрут -

  {
        path: 'course/:id',
        component: CourseDetailComponent,
        resolve: {
            detail:CourseDetailResover
        }
    }

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

export class CourseDetailComponent implements OnInit {

  course$: Observable<Course>;
  lessons$:Observable<Lesson[]>;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    console.log('inside here');
    this.course$ = this.route.data.pipe(map(data => data['detail'][0]));

    this.lessons$ = this.route.data.pipe(map(data => data['detail'][1]));
  }
}

При включении трассировки на маршруте я вижу следующее:

Router Event: ResolveStart

Однако в журналах трассировки Router Event: ResolveEnd нет.

В чем здесь проблема?

Answer 1

Похоже, вы двойное вложение RxJS observables здесь - это то, что задумано?Когда вы смотрите на Resolve интерфейс angular, вы правильно его реализуете, но ваш T на самом деле сам по себе Observable:

export interface Resolve<T> {
    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<T> | Promise<T> | T;
}

Так что ваш класс распознавателя должен выглядеть примерно так:

export class CourseDetailResover implements Resolve<[Course, (Lesson[])]>

Тот факт, что ваш ngOnInit никогда не вызывается, приводит к предположению, что Observable, возвращаемый вашим методом resolve, никогда не завершается / завершается.Обратите внимание, что Observable должен завершиться, чтобы распознаватель «завершил» свою работу и продолжил процесс маршрутизации.Посмотрите эту проблему для справки:

https://github.com/angular/angular/issues/10556

Следующий код будет работать

@Injectable({
    providedIn: 'root'
})
export class CourseDetailResover implements Resolve<Promise<Observable<[Course, (Lesson[])]>>>  {

    constructor(private coursesService: CoursesService) { }

    resolve(route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Promise<Observable<[Course, (Lesson[])]>> {
            const routerObservable =   this.coursesService.findCourseByUrl(route.params['id'])
            .pipe(
                switchMap(
                    course => this.coursesService.findLessonsForCourse(course.id)
                        .pipe(
                            map<Lesson[], [Course, Lesson[]]>(lessons => [course, lessons]),
                        )
                )
            );

            return new Promise((resolve,reject) => {
                routerObservable.pipe(
                    first()
                ).subscribe((data) => {
                    console.log(data)
                    resolve(routerObservable)});
            })
    }
}

На стороне компонента

  ngOnInit(): void {
    console.log('inside here');
     const observableD:Observable<[Course, (Lesson[])]> = this.route.snapshot.data["detail"];
    this.course$ = observableD.pipe(
      map(data => data[0])
    );

    this.lessons$ = observableD.pipe(
      map(data => data[1])
    );
  }