zoukankan      html  css  js  c++  java
  • [Angular2 Router] Load Data Based on Angular 2 Route Params

    You can load resource based on the url using the a combination of ActivatedRouteand Angular 2’s Http service. Since the params and Http are both streams, you can use RxJS to get the data off the param then switchMap over to an Http request using that data.

    Hero.component.ts:

    import { Component, OnInit } from '@angular/core';
    import {ActivatedRoute} from "@angular/router";
    import {StarWarsService} from "../heros.service";
    import {Observable} from "rxjs";
    
    @Component({
      selector: 'app-hero',
      templateUrl: 'hero.component.html',
      styleUrls: ['hero.component.css']
    })
    export class HeroComponent implements OnInit {
    
      hero: Observable<Object>;
      constructor(private router: ActivatedRoute, private starwarService: StarWarsService) {
        this.hero = router.params.map((p:any) => p.id)
          .switchMap( id => this.starwarService.getPersonDetail(id))
          .startWith({
            name: 'Loading...',
            image: ''
          })
      }
    
      ngOnInit() {
      }
    
    }

    hero.component.html:

    <div>
      <h2>{{(hero | async)?.name}}</h2>
      <img [src]="(hero | async)?.image" [alt]="(hero | async)?.name">
    
      <!--
        Notice that, here we use ? mark. This is not necessary if we use 'startWith({name: '', image: ''})'
        startWith will set init value, so that hero.name / hero.image won't be undefined
       -->
    </div>

    heros.service.ts:

    import {Injectable, Inject} from '@angular/core';
    import {STARWARS_BASE_URL} from "../shared/constance.service";
    import {Http} from "@angular/http";
    import "rxjs/add/operator/map";
    import "rxjs/add/operator/switchMap";
    
    @Injectable()
    export class StarWarsService {
    
        constructor(@Inject(STARWARS_BASE_URL) private starwarUrl,
          private http: Http
        ) {}
    
        getPeople(){
          return this.http.get(`${this.starwarUrl}/people`)
            .map( res => res.json())
        }
    
        getPersonDetail(id){
          return this.http.get(`${this.starwarUrl}/people/${id}`)
            .map( res => res.json())
            .map( (hero:any) => Object.assign({}, hero, {
              image: `${this.starwarUrl}/${hero.image}`
            }))
        }
    }

    Github 

  • 相关阅读:
    什么是回归测试?
    单元测试、集成测试、系统测试的侧重点是什么?
    一个测试工程师应具备那些素质?
    你所了解的的软件测试类型都有哪些,简单介绍一下。
    Python
    爬虫-urllib3模块的使用
    爬图片(附,源码)
    MySQL存储引擎:MyISAM和InnoDB的区别
    员工管理系统
    MySQL锁(二)表锁:为什么给小表加字段会导致整个库挂掉?
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5909707.html
Copyright © 2011-2022 走看看