Angular 6路由器解析-未调用组件答案

【问题标题】：Angular 6 router resolve - Component not being calledAngular 6路由器解析-未调用组件
【发布时间】：2019-02-08 19:18:31
【问题描述】：

以下是我在路线上定义的决心。

@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。

这可能是什么问题？

【问题讨论】：

标签： angular firebase rxjs angular6

【解决方案1】：

看起来你在这里双重嵌套 RxJS observables - 这是故意的吗？查看 Angular 的 Resolve 接口时，您的实现是正确的，但您的 T 实际上是 Observable 本身：

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

所以你的解析器类应该看起来像这样：

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

您的ngOnInit 从未被调用这一事实导致您的resolve 方法返回的Observable 永远不会终止/完成的假设。请注意，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])
    );
  }

【讨论】：