[Angular] Data Resolver

// 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]);

    }


}