Question

我一直在浏览Angular 2 Tour of Heroes教程，而且我不理解lesson on using HTTP从服务中获取数据。

在英雄服务的本课程中，变量heroesUrl被声明为＆＃39; app / heroes＆＃39;。

  private heroesUrl = 'app/heroes';  // URL to web api

  constructor(private http: Http) { }

  getHeroes(): Promise<Hero[]> {
    return this.http.get(this.heroesUrl)
               .toPromise()
               .then(response => response.json().data as Hero[])
               .catch(this.handleError);
  }

数据在内存数据服务中声明为静态数组：

import { InMemoryDbService } from 'angular-in-memory-web-api';

export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    let heroes = [
      { id: 11, name: 'Mr. Nice (api)' },
      { id: 12, name: 'Narco' },
      { id: 13, name: 'Bombasto' },
      { id: 14, name: 'Celeritas' },
      { id: 15, name: 'Magneta' },
      { id: 16, name: 'RubberMan' },
      { id: 17, name: 'Dynama' },
      { id: 18, name: 'Dr IQ' },
      { id: 19, name: 'Magma' },
      { id: 20, name: 'Tornado' },
      { id: 21, name: 'Mister Man' }
    ];
    return { heroes };
  }
}

但是在路由模块＆＃39;英雄＆＃39; （我假设与app / heroes＆＃39;相同）指向HeroesComponent。

 const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: 'heroes', component: HeroesComponent }
];

在HeroesComponent中，getHeroes()函数调用this.heroService.getHeroes()函数：

  getHeroes(): void {
    //Result of heroService.getHeroes is a Promise
    this.heroService.getHeroes().then(heroesresult => this.heroes = heroesresult);
  }

表面看起来HeroesComponent.getHeroes()调用HeroService.getHeroes()，然后http.get返回HeroesComponent，而不是数据源。

这一切对我有用（就像魔法一样），但没有解释如何通过从HeroesService到this.http.get(this.heroesUrl)的调用获取内存数据服务中的数据。

有人可以帮我理解吗？

Answer 1

'app / heroes'URL不是指路由模块'英雄'。它指的是in-memory-data-service.ts中的英雄数据对象。所以这不是魔术; URL只是指数据对象，而不是路径。

https://angular.io/tutorial/toh-pt6上的文档过于简洁，无法明确，我已经就https://github.com/angular/angular.io/issues/3559

需要改进的内容提出了建议

Answer 2

这绝对不是魔术。

正在发生的事情是你正在向内存api调用get请求！

查看in-memory-api

基本上，类InMemoryDataService从InMemoryDbService扩展，它创建一个内存api observable。

将其视为已经动态创建的存根，然后当您调用get方法时，调用将被重定向到该包（通过xhrbackend），然后您将获得该英雄列表。

在Angular 2教程中了解HTTP

2 个答案: