ts获取服务器数据_Angular - 从服务端获取数据

从服务端获取数据link

Get data from a serverlink

在这节课中，你将借助 Angular 的

In this tutorial, you'll add the following data persistence features with help from Angular'sHeroService 通过 HTTP 请求获取英雄数据。

The HeroService gets hero data with HTTP requests.

用户可以添加、编辑和删除英雄，并通过 HTTP 来保存这些更改。

Users can add, edit, and delete heroes and save these changes over HTTP.

用户可以根据名字搜索英雄。

Users can search for heroes by name.

要查看本页所讲的范例程序，参阅

For the sample app that this page describes, see the

启用 HTTP 服务link

Enable HTTP serviceslink

要让 AppModule 中：

Make AppModule by importing it:import { HttpClientModule } from '@angular/common/http';src/app/app.module.ts (HttpClientModule import)content_copy

import{HttpClientModule}from'@angular/common/http';

接下来，仍然在 AppModule 中，把 imports 数组中：

Next, still in the AppModule, add imports array:src/app/app.module.ts (imports array excerpt)content_copy

模拟数据服务器link

Simulate a data serverlink

This tutorial sample mimics communication with a remote data server by using the In-memory Web API module.

安装完这个模块之后，应用将会通过

After installing the module, the app will make requests to and receive responses from the In-memory Web API is intercepting those requests, applying them to an in-memory data store, and returning simulated responses.

通过使用内存 Web API，你不用架设服务器就可以学习

By using the In-memory Web API, you won't have to set up a server to learn about

重要： 这个内存 Web API 模块与 Angular 中的 HTTP 模块无关。

Important: the In-memory Web API module has nothing to do with HTTP in Angular.

如果你只是在阅读本教程来学习 跳过这一步。 如果你正在随着本教程敲代码，那就留下来，并加上这个内存 Web API。

If you're just reading this tutorial to learn about skip over this step. If you're coding along with this tutorial, stay here and add the In-memory Web API now.

用如下命令从 npm 中安装这个内存 Web API 包(译注：请使用 0.5+ 的版本，不要使用 0.4-)

Install the In-memory Web API package from npm with the following command:npm install angular-in-memory-web-api --savecontent_copy

npm install angular-in-memory-web-api--save

在 AppModule 中，导入 HttpClientInMemoryWebApiModule 和 InMemoryDataService 类，稍后你将创建它们。

In the AppModule, import the HttpClientInMemoryWebApiModule and the InMemoryDataService class, which you will create in a moment.import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api'; import { InMemoryDataService } from './in-memory-data.service';src/app/app.module.ts (In-memory Web API imports)content_copy

import{HttpClientInMemoryWebApiModule}from'angular-in-memory-web-api';import{InMemoryDataService}from'./in-memory-data.service';

在 HttpClientInMemoryWebApiModule 添加到 AppModule 的 imports 数组中，并以 InMemoryDataService 为参数对其进行配置。

After the HttpClientInMemoryWebApiModule to the AppModule imports array and configure it with the InMemoryDataService.HttpClientModule, // The HttpClientInMemoryWebApiModule module intercepts HTTP requests // and returns simulated server responses. // Remove it when a real server is ready to receive requests. HttpClientInMemoryWebApiModule.forRoot( InMemoryDataService, { dataEncapsulation: false } )src/app/app.module.ts (imports array excerpt)content_copy

HttpClientModule,// The HttpClientInMemoryWebApiModule module intercepts HTTP requests// and returns simulated server responses.// Remove it when a real server is ready to receive requests.HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService,{dataEncapsulation:false})

forRoot() 配置方法接收一个 InMemoryDataService 类来初始化内存数据库。

The forRoot() configuration method takes an InMemoryDataService class that primes the in-memory database.

使用以下命令生成类 src/app/in-memory-data.service.ts：

Generate the class src/app/in-memory-data.service.ts with the following command:ng generate service InMemoryDatacontent_copy

ng generate serviceInMemoryData

将 in-memory-data.service.ts 改为以下内容：

Replace the default contents of in-memory-data.service.ts with the following:import { Injectable } from '@angular/core'; import { InMemoryDbService } from 'angular-in-memory-web-api'; import { Hero } from './hero'; @Injectable({ providedIn: 'root', }) export class InMemoryDataService implements InMemoryDbService { createDb() { const heroes = [ { id: 11, name: 'Dr Nice' }, { 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' } ]; return {heroes}; } // Overrides the genId method to ensure that a hero always has an id. // If the heroes array is empty, // the method below returns the initial number (11). // if the heroes array is not empty, the method below returns the highest // hero id + 1. genId(heroes: Hero[]): number { return heroes.length > 0 ? Math.max(...heroes.map(hero => hero.id)) + 1 : 11; } }src/app/in-memory-data.service.tscontent_copy

import{Injectable}from'@angular/core';import{InMemoryDbService}from'angular-in-memory-web-api';import{Hero}from'./hero';@Injectable({providedIn:'root',})exportclassInMemoryDataServiceimplementsInMemoryDbService{createDb(){constheroes=[{id:11,name:'Dr Nice'},{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'}];return{heroes};}// Overrides the genId method to ensure that a hero always has an id.// If the heroes array is empty,// the method below re