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 

  • 相关阅读:
    .NET创建WebService服务简单的例子
    SVN服务器搭建
    Visual Studio 2017 系统发布部署服务器教程
    C#进阶--WebApi异常处理机制
    利用iis虚拟目录实现文件服务器功能(分布式存储)
    jQuery 选择器
    jQuery 简介
    从「闭包」到 思考人生
    跨域
    ajax 和 mock 数据
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5909707.html
Copyright © 2011-2022 走看看