Angular的injectable装饰器解析

装饰器是什么
它是一个表达式

该表达式被执行后，返回一个函数

函数的入参分别为 targe、name 和 descriptor

执行该函数后，可能返回 descriptor 对象，用于配置 target 对象　

装饰器的分类

类装饰器 (Class decorators)

属性装饰器 (Property decorators)

方法装饰器 (Method decorators)

参数装饰器 (Parameter decorators)

angular提供依赖注入的实现， 主要分为2方面：1. 可注入的功能组件如何实现； 2. 如何在另外对象中注入别的功能组件。

• 实现功能组件的可注入。
  这点主要通过 @Injectable() 装饰器来声明某个类可被注入实例化。 例子：

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

@Injectable()
export class HeroService {

  constructor() { }

  getHeroes(): Hero[] {
    return HEROES;
  }

}

上面代码把HeroService声明为可注入的服务， 这样就可以在别的组件中通过依赖注入的方式来使用

接下来需要在angular的根模块NgModule的providers中声明这个服务。 比如默认app.module.ts中的AppModule类。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { HeroService } from './hero.service';
import { AppRoutingModule } from './/app-routing.module';




@NgModule({
declarations: [
AppComponent,
HeroesComponent,
HeroDetailComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [HeroService],
bootstrap: [AppComponent]
})
export class AppModule { }

在另外的对象中注入前面的功能组件：

导入组件

import { HeroService } from '../hero.service';

在该类的构造函数中导入HeroService

constructor(private heroService: HeroService) { }

使用注入组件的函数

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