Angular 4入门指南：服务

在Angular入门指南系列的第一部分中，您学习了Angular 4中的组件以及如何编写Angular组件。

在本系列教程的这一部分，您将学习Angular中的服务以及如何使用它们。

入门

您将从克隆本系列第一部分的源代码开始。

git clone https://github.com/royagasthyan/AngularComponent.git

获得源代码后，导航到项目目录并安装所需的依赖项。

cd AngularComponent
npm install

安装依赖项后，通过键入以下命令来启动应用程序：

ng serve

您应该在http：// localhost：4200 /上运行该应用程序。

什么是角度服务？

在Angular应用程序中，组件负责将数据呈现给视图。 Angular服务负责为要显示的组件获取数据。

由于数据获取部分是在Angular服务中单独处理的，因此可以更轻松地模拟测试服务。

为什么选择角服务？

从官方文档中：

组件不应直接获取或保存数据，它们当然也不应故意提供虚假数据。 他们应专注于呈现数据并将数据访问权委派给服务。

在本教程中，您将看到如何创建一个Angular服务来获取Angular组件的数据。

使用Angular服务的另一个优点是，它使在两个单独的组件之间共享数据更加容易。

创建一个单词组件

在本教程中，您将创建一个单词组件，该组件将根据API搜索最终用户输入的查询词并返回搜索结果。

您将使用Angular服务进行API调用。 因此，让我们开始创建一个Angular组件。

导航到项目目录并创建一个名为word的文件夹。

在word项目目录中，创建一个名为word.component.html的文件。 添加以下HTML代码：

<h2>
    Word Component
</h2>
<div>
    <input type="text">
</div>

创建一个名为word.component.ts的文件，该文件将控制word.component.html模板。 外观如下：

import { Component } from '@angular/core';

@Component({
  selector: 'word',
  templateUrl: 'word.component.html',
  styleUrls: ['word.component.css']
})
export class WordComponent {
  
	constructor(){
		
	}

}

如上面的代码所示，您刚刚创建了WordComponent类，该类将控制word.component.html模板文件。

它有一个@component装饰器，您在其中定义了可以使用它的selector ， templateUrl和组件styleUrls 。

创建组件后，需要将组件类添加到NgModule 。

打开src/app目录中的app.module.ts文件，然后导入新的WordComponent 。

import { WordComponent } from './word/word.component'

包括WordComponent里面NgModule声明。 这是app.module.ts文件的外观：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CalcComponent } from './calc/calc.component'
import { WordComponent } from './word/word.component'
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    CalcComponent,
    WordComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

打开src/app文件夹内的app.component.html文件， WordComponent使用定义的选择器添加新的WordComponent 。 外观如下：

<div style="text-align:center">
  <word></word>
</div>

保存以上更改，然后重新启动服务器。 加载应用程序时，应该显示word组件。

创建Word服务

让我们创建一个Angular服务，以根据服务URL查询该词，该服务URL会返回该词的同义词。

您将使用Datamuse API来查询关键字。

在src/app/word文件夹中创建一个名为word.service.ts的文件。 您将使用@Injectable()装饰器使服务类可用于注入。

这是word.service.ts文件的外观：

import { Injectable } from '@angular/core';

@Injectable()
export class WordService {

    constructor(){
        
    }

}

为了进行API调用，您将使用HTTP模块。 将HttpModule导入src/app/app.module.ts文件。 该文件的外观如下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CalcComponent } from './calc/calc.component'
import { WordComponent } from './word/word.component'
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

@NgModule({
  declarations: [
    AppComponent,
    CalcComponent,
    WordComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

将Http模块导入word.service.ts文件中以进行API调用。

import { Http } from '@angular/http';

您将对以下URL进行API调用。

https://api.datamuse.com/words?max=10&ml=

您需要在上面的URL后面附加查询关键字，以获取最多10个查询词的同义词。

在WordService类中定义变量url ，然后在构造函数方法中对其进行初始化。

export class WordService {
     
    url: string

    constructor(private http : Http){
        this.url  = 'https://api.datamuse.com/words?max=10&ml='
    }
}

您已经声明并初始化了http变量，该变量将在进行API调用时使用。

定义一个名为search_word的方法，该方法将API调用的结果作为JSON 。 外观如下：

search_word(term){
    return this.http.get(this.url + term).map(res => {
        return res.json()
    })
}

如上面的代码所示，您已使用Angular Http模块向API URL发出GET请求，并将响应作为JSON返回。 这是word.service.ts文件的外观：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map'

@Injectable()
export class WordService {
     
    url: string

    constructor(private http : Http){
        this.url  = 'https://api.datamuse.com/words?max=10&ml='
    }

    search_word(term){
        return this.http.get(this.url + term).map(res => {
        	return res.json()
        })
    }
}

搜索词

现在，你有字服务蠢蠢欲动的API调用，您需要定义WordService作为供应商WordComponent 。

将WordService导入word.component.ts文件中。

import { WordService } from './word.service';

在Angular WordComponent定义providers 。

@Component({
  selector: 'word',
  templateUrl: 'word.component.html',
  styleUrls: ['word.component.css'],
  providers : [WordService]
})

在constructor方法中初始化WordService 。

constructor(private service: WordService){
	
}

在word.component.ts文件中定义一个称为search的方法，该方法将调用service方法。 在search方法内部，从WordService订阅search_word方法。

search(term){
	this.service.search_word(term).subscribe(res => {
		this.words = res;
	})	
}

这是修改后的word.component.ts文件的外观：

import { Component } from '@angular/core';
import { WordService } from './word.service';

@Component({
  selector: 'word',
  templateUrl: 'word.component.html',
  styleUrls: ['word.component.css'],
  providers : [WordService]
})
export class WordComponent {
  
    words : any;
	constructor(private service: WordService){
		
	}

	search(term){
		this.service.search_word(term).subscribe(res => {
			this.words = res;
		})	
	}

}

将enter键按下事件添加到word.component.html文件中的输入元素。

<input #query (keyup.enter)="search(query.value)" type="text">

当用户按下Enter键输入查询词后，它将在word.component.ts文件中调用搜索方法。

如在word.component.ts文件内的search方法中word.component.ts ，您正在将words变量内的响应收集为列表。 因此，让我们迭代words列表并显示在word.component.html文件中。

修改word.component.html文件，如下所示：

<div>
	<ul>
		<li *ngFor="let item of words">
			{{item.word}}
		</li>
	</ul>
</div>

保存以上更改，然后重新启动服务器。 输入关键字并按Enter键，您应该将结果填充为列表。

包起来

在本教程中，您学习了什么是Angular服务。 您学习了如何创建Angular服务以及如何从Angular组件中使用它们。 您创建了一个Word组件，该组件针对Angular服务查询输入的关键字，并在组件模板文件中显示返回的数据。

您如何学习Angular服务？ 请在下面的评论部分中让我们知道您的想法和建议。

该教程的源代码可在GitHub上获得 。

翻译自: https://code.tutsplus.com/tutorials/beginners-guide-to-angular-4-services--cms-29675