Angular5学习笔记 - 创建服务（九）

ng generate service service-name #简写 ng g s component-name
ng g s services/userService

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';@Injectable()
export class UserServiceService {
private api = 'http://localhost:3003'; // 服务器地址
private gundamList = '/news'; // 获取全部
private getGundam = '/detail'; // 获取明细 constructor(private http: Http) { }
// 获得全部数据
getGundams(): Promise<any[]> {
return this.http.get(this.api + this.gundamList)
.toPromise()
.then(response => response.json())
.catch(this.handleError);
} // 根据Id查询高达
getGundamById(id: number): Promise<object> {
console.log(this.api + this.getGundam + '?id=' + id);
return this.http.get(this.api + this.getGundam + '?id=' + id)
.toPromise()
.then( response => response.json())
.catch(this.handleError);
} private handleError(error: any): Promise<any> {
console.error('An error occurred', error); // for demo purposes only
return Promise.reject(error.message || error);
}
}

import {UserServiceService} from './services/user-service.service'; /* 注册服务 */
providers: [UserServiceService],

import {Component, OnInit} from '@angular/core';
/*import { Http } from '@angular/http'; 添加Http请求模块 */
import {UserServiceService} from '../../../services/user-service.service';
import {
ActivatedRoute,
Params
} from '@angular/router';@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
/* 变量定义 */
data:object[] = [];/* 定义列表数据变量 */ /* 构造方法，做依赖注入 */
constructor(
// private _httpService: Http,
private route: ActivatedRoute,
private _userServiceService: UserServiceService
) { } /* 加载完事件，做初始化 */
ngOnInit() {
// this._httpService.get('http://localhost:3003/news').subscribe(values => {
// console.log(values);
// this.data = values.json();
// });
this._userServiceService.getGundams().then(gundams => this.data = gundams.slice(0, 3)); // 让主页只显示3个
}}