zoukankan      html  css  js  c++  java
  • [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]);
    
        }
    
    
    }
  • 相关阅读:
    复杂数据权限设计方案
    HTTP 错误 500.24
    C# 树形结构tree拼接
    MVC View返回list列表
    springboot使用validation 插件做数据校验
    java导出excel,多表头合并
    微信小程序表单验证
    springboot跑定时任务
    Springboot 上传excel并解析文件内容
    jmeter基本使用
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13843865.html
Copyright © 2011-2022 走看看