angular2的服务

学习总结，如有不恰当描述，请大神们评论告诉我，让我学习的更全面，更准确。

angular2的服务（service）,很多人会联想到后台的service层,其实二者很相似，angular2的服务是指那些能够被其它的组件或者指令调用的单一的,可共享的代码块.服务能够使我们提高代码的利用率,方便组件之间共享数据和方法,方便测试和维护..

接下来，让我们看看我写的例子：

这是我的目录结构：

user.ts代码

export class User{
     id: string;
     name: string;
}

ts中，不写权限修饰符默认public和java一样！

user-date.ts

import {User} from "./user";
export const Users:User[]=[
  {id:'1',name:'张三'},
  {id:'2',name:'李四'},
  {id:'3',name:'王五'},
  {id:'4',name:'赵六'},
  {id:'5',name:'钱七'}
];

因为没有http，先自己造数据！

user-service.ts

import {User} from "./user";
import {Users} from "./user-date";
/*服务，提供公共常用的方法代码*/
export class UserService{

  getUser():Promise<User[]>{
    return Promise.resolve(Users);
}
}

promise是承诺，是防止异步传输数据出现不同步的问题。

app.component.ts

import {Component, OnInit} from '@angular/core';
import {UserService} from "./user-service";
import {User} from "./user";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers:[UserService]
})
export class AppComponent implements  OnInit{
  users:User[];
  constructor(private userService:UserService){
  }
  getUserDate(){
    this.userService.getUser().then(
      users => this.users = users
    )
  }
  ngOnInit(){
    this.getUserDate();
  }
}

使用服务，在@Component中要写提供商providers:[UserService]！

oninit接口是组建生命周期钩子！

接口方法有很多，我们使用其中的ngOnInit(){}；就是在页面组建渲染的时候，调用实现ngOnInit（）方法。给angular2页面赋初值。不然方法都只能在发生事件的时候才能调用！

app.component.ts

<h1>angular-service</h1>
<ul>
  <li *ngFor="let user of users">
    {{user.name}}
  </li>
</ul>

*ngFor 是angular2自带的内置循环遍历指令：

npm run start

效果图：

有哪里描述不准确的希望浏览者可以提出来，大家一起学习！我也正在angular2学习的路上！