[入门级]angular4学习笔记05

可注入的服务

• 我们要导入angular的Injectable函数，并作为@Injectable装饰器使用这个函数
• 当TypeScript看到@Injectable装饰器时，就会记下本服务的元数据，如果angular需要往这个服务中注入其他依赖，就会使用这些元数据

hero.service.ts

import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';

@Injectable()
export class HeroService {
    //异步和promise，后面有介绍
    getHeroes():Promise{
        return Promise.resolve(HEROES);
    }
}

HeroService可以从任何地方获取hero数据－－web服务器，本地存储或者是模拟数据源

mock数据

mock-heroes.ts

import { Hero } from './hero';

export const HEROES: Hero[] = [
  { id:11, name : 'hero01'},
  { id:12, name : 'hero02'},
  { id:13, name : 'hero03'},
  { id:14, name : 'hero04'},
  { id:15, name : 'hero05'},
  { id:16, name : 'hero06'},
  { id:17, name : 'hero07'},
  { id:18, name : 'hero08'}
]

export常量HEROES

注入HeroService

• 添加一个构造器，并定义一个私有属性
• 添加组件的providers元数据

app.component.ts

constructor(private heroService:HeroService){}

注入器还不知道如何创建HeroService,需要注册一个HeroService提供商，来告诉注入器如何创建HeroService,要做到这一点，我们要在@Component组件的元数据底部添加providers数组属性

app.component.ts

providers: [HeroService]

provider数组告诉angular，当它创建新的AppComponent组件时，也要创建一个HeroService新的实例，AppComponent会使用那个服务来获取英雄列表，在它组件树的每一个子组件也同样如此

ngOnInit生命周期钩子

• 构造器不应该包含复杂的逻辑，特别是那些需要从服务器获取数据的逻辑更是，构造器时为了简单的初始化工作而设计的，例如把构造函数的参数赋给属性
• 只要我们实现了angular的ngOnInit生命周期钩子，angular就会主动调用这个钩子

如何使用ngOnInit

app.component.ts

1.在import中添加OnInit

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

2.在export中添加OnInit接口实现

export class AppComponent implements OnInit {
    ...
}

3.通过调用getHeroes(),来完成初始化

ngOnInit():void{
   this.getHeroes();
}

异步和promise

hero.service.ts中的getHeroes()函数签名是同步的，可以使用promise，它是一种异步技术，它会改变getHeroes方法的签名，通过把回调函数作为参数传给承诺对象的then方法

app.component.ts

getHeroes(): void{
    this.heroService.getHeroes().then(heroes => this.heroes = heroes);
  }

公众号：前端咖秀