实现在角2

一个HTTP Web请求我一直在关注Angular2例子在这里：https://angular.io/docs/ts/latest/tutorial/实现在角2

我得，我已经到位的模仿英雄们的承诺结束。我想进一步，但尝试建立一个http请求，以获得来自第三方来源的英雄列表。

举个例子，我已经设置了一个网址http://pastebin.com/raw/2mEEPeUs，它以示例中给出的格式返回英雄列表作为json。

实现此目的的最佳方法是什么？

通过观察Angular 2, Getting Data Out of Service我想这可能是因为更新以下简单：

hero.service.ts

import {Hero} from './hero'; 
import {HEROES} from './mock-heroes'; 
import {Injectable} from 'angular2/core'; 
import {Http, Response, HTTP_PROVIDERS} from "angular2/http"; 

@Injectable() 
export class HeroService { 
constructor(public http: Http){} 
    getHeroes(){ 
    return this.http.request('http://pastebin.com/raw/2mEEPeUs') 
     .map(response => response.json()); 
    } 
}

和

app.component.js

ngOnInit() { 
    this.getHeroes().subscribe(
    res => this.heroes = res, 
    err => this.logError(err)); 
}

来源

2016-01-25 GrahamJRoy

您应该利用async管道来显示y模板中的可观察值。这样，您就不必由你自己来管理订阅：

@Component({ 
    template: ` 
    <ul> 
     <li *ngRepeat="hero of heroes | async">{{hero.name}}</li> 
    </ul> 
    ` 
}) 
export class MyComponent { 
    ngOnInit() { 
    this.heroes = this.getHeroes(); 
    } 
}

这个答案也可以给你要实现服务的HTTP请求，并从组件使用它们的方式一些额外提示：

How to Consume Http Component efficiently in a service in angular 2 beta?

希望它可以帮助你，蒂埃里

来源

2016-01-25 17:44:24

在该p lunker我创建了http请求的例子：http://plnkr.co/edit/qXwLNh6UHacmHhji80VR

对我来说，那里有3米坚硬的东西：

您应该添加到您的index.html
您需要的HTTP_PROVIDERS添加到启动喷油器.TS
您需要导入rxjs /接收进主人公服务

代码如下： boot.ts

import {bootstrap} from 'angular2/platform/browser'; 
import {HTTP_PROVIDERS} from "angular2/http"; 
import {App} from "./app.component"; 
import {HeroService} from "./hero.service"; 

bootstrap(App, [HeroService, HTTP_PROVIDERS]);

英雄，service.ts

import {Injectable} from 'angular2/core'; 
import {Http} from 'angular2/http'; 
import construct = Reflect.construct; 
import 'rxjs/Rx'; 

@Injectable() 
export class HeroService { 


    constructor(private _http : Http) { 

    } 


    public getHeroesAsObservable() { 
     // reactive programming 
     // https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 
     //http://chariotsolutions.com/blog/post/angular2-observables-http-separating-services-components/ 

     return this._http.get('heroes').map(res => res.json()); 

    } 

}

app.component.ts

import {Component} from 'angular2/core'; 
import {HeroDetailComponent} from "./hero-detail.component"; 
import {HeroService} from "./hero.service"; 
import {OnInit} from "angular2/core"; 

@Component({ 
    selector: 'my-app', 
    styles:[` 
     .heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;} 
     .heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; } 
     .heroes li:hover {color: #369; background-color: #EEE; left: .2em;} 
     .heroes .badge { 
     font-size: small; 
     color: white; 
     padding: 0.1em 0.7em; 
     background-color: #369; 
     line-height: 1em; 
     position: relative; 
     left: -1px; 
     top: -1px; 
     } 
     .selected { background-color: #EEE; color: #369; } 
    `], 
    template: ` 
     <h1>{{title}}</h1> 
     <ul class="heroes"> 
      <li *ngFor="#hero of heroes" 
       (click)="onSelectHero(hero)" 
       [class.selected]="hero === selectedHero"> 
       <span class="badge">{{hero.id}}</span> {{hero.name}} 
      </li> 
     </ul> 
     <hero-detail [hero]="selectedHero"></hero-detail> 
     `, 
    directives:[HeroDetailComponent], 
    //providers:[HeroService] 
}) 
export class App implements OnInit{ 
    public title = 'Tours of Heroes'; 
    public heroes; 
    public selectedHero : Hero; 

    constructor(private _heroesService : HeroService) { 

    } 

    ngOnInit() { 
     //this._heroesService.getHeroes().then(heroes => this.heroes = heroes); 

     var observable = this._heroesService.getHeroesAsObservable() 
      .subscribe(
       data => this.heroes = data, 
       err => console.log('ERROR!!!', err) 
      ); 

    } 

    onSelectHero (hero : Hero) { 
     this.selectedHero = hero; 
    } 

}

当地的Index.html：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>tour of heroes tutorial Angular 2</title> 


    <!-- 1. Load libraries --> 
    <script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script> 
    <script src="../node_modules/systemjs/dist/system.src.js"></script> 
    <script src="../node_modules/rxjs/bundles/Rx.js"></script> 
    <script src="../node_modules/angular2/bundles/angular2.js"></script> 
    <script src="../node_modules/angular2/bundles/http.dev.js"></script> 

    <!-- 2. Configure SystemJS --> 
    <script> 
     System.config({ 
      packages: { 
       src: { 
        format: 'register', 
        defaultExtension: 'js' 
       } 
      } 
     }); 
     System.import('src/boot') 
       .then(null, console.error); 
    </script> 

</head> 
<body> 
    <my-app>Loading...</my-app> 
</body> 
</html> 


<html>

添加一个异步管道是一个好主意！希望蹲在你身边

来源

2016-01-25 20:03:26

回答

相关问题