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]);
    
        }
    
    
    }
  • 相关阅读:
    SSO单点登录的实现原理
    Svn服务器的安装和配置
    Linux平台上搭建apache+tomcat负载均衡集群
    js验证textarea里面是否有换行符
    js 正则验证url
    markdown
    php解决中文乱码
    html文本框和按钮这些点击时不显示边框的光晕
    js去掉字符串前后以及中间的空格
    用ssh-key-gen 在本地主机上创建公钥和密钥
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13843865.html
Copyright © 2011-2022 走看看