// course-detail.resolver.ts import {Resolve, ActivatedRouteSnapshot, RouterStateSnapshot} from "@angular/router"; import {Course} from "../shared/model/course"; import {Lesson} from "../shared/model/lesson"; import {Observable} from "rxjs"; import {Injectable} from "@angular/core"; import {CoursesService} from "../services/courses.service"; @Injectable() export class CourseDetailResolver implements Resolve<[Course,Lesson[]]> { constructor(private coursesService: CoursesService) {} resolve( route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<[Course, (Lesson[])]> { return this.coursesService.findCourseByUrl(route.params['id']) .switchMap( course => this.coursesService.findLessonsForCourse(course.id),
(course, lessons) => [course, lessons]
); } }
The highlighted code is a combinator, which combine inner and outter observables and return a new Tuple type.
Router:
{ path: 'course/:id', component: CourseDetailComponent, resolve: { detail: CourseDetailResolver } },
Component:
import {Component, OnInit} from '@angular/core'; import {ActivatedRoute} from '@angular/router'; import {Course} from "../shared/model/course"; import {Lesson} from "../shared/model/lesson"; import {Observable} from "rxjs"; @Component({ selector: 'course-detail', templateUrl: './course-detail.component.html', styleUrls: ['./course-detail.component.css'] }) export class CourseDetailComponent implements OnInit { course$: Observable<Course>; lessons$: Observable<Lesson[]>; constructor(private route: ActivatedRoute) { } ngOnInit() { this.course$ = this.route.data.map(data => data['detail'][0]); this.lessons$ = this.route.data.map(data => data['detail'][1]); } }