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 

  • 相关阅读:
    将Web项目War包部署到Tomcat服务器基本步骤(完整版)
    性能实战分析-环境搭建(一)
    SQL Server Profiler追踪数据库死锁
    性能测试的各种监控工具大全
    python学习
    Linux常见面试题一
    Linux下用于查看系统当前登录用户信息的4种方法
    HDU 1394 Minimum Inversion Number(线段树求逆序对)
    SGU 180 Inversions(离散化 + 线段树求逆序对)
    Codeforces Round #FF (Div. 2) C. DZY Loves Sequences
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5909707.html
Copyright © 2011-2022 走看看