angular 服务providers

在Angular中有很多方式可以将服务类注册到注入器中:

• @Injectable 元数据中的providedIn属性
• @NgModule 元数据中的 providers属性
• @Component 元数据中的 providers属性

创建一个文件名叫名 hero.service.ts叫 hero 的服务
 hero.service.ts

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

@Injectable({
  providedIn: 'root',
})
export class HeroService {

  constructor() { }

  // 新增加setName方法
  setName(name:string):string{
    return `姓名：${name}`;
  }

}

1.@Injectable 元数据中的providedIn属性

providedIn: 'root' 告诉 Angular在根注入器中注册这个服务,这也是使用CLI生成服务时默认的方式.
这种方式注册,不需要再@NgModule装饰器中写providers,而且在代码编译打包时,可以执行摇树优化，会移除所有没在应用中使用过的服务。推荐使用此种方式注册服务

使用providedIn的话，后面直接在项目中使用了。

使用：heroes.component.ts

import { Component, OnInit } from '@angular/core';
import { HeroService } from '../hero.service'

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  constructor(private heroService:HeroService) { }

  ngOnInit() {
    this.heroService.setName('张三');
  }
}

2.@NgModule 元数据中的 providers属性

改写 hero.service.ts里面的@Injectable，如下

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

@Injectable() // 删掉了 {providedIn: 'root'}
export class HeroService {...}

 xx.module.ts , 例如app.module.ts

...

@NgModule({
    providers: [
        HeroService,
       // { provide: HeroService, useValue: HeroService }
    ],
})

...

然后就可以在使用拉，使用方法，同1 heroes.component.ts文件

3.@Component 元数据中的 providers属性

 hero.service.ts里面的@Injectable，删掉 {providedIn: 'root'},同2 hero.service.ts文件

改写heroes.component.ts

import { Component, OnInit } from '@angular/core';
import { HeroService } from '../hero.service'

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css'],
  providers: [HeroService] // 新增 providers: [HeroService]
})
export class HeroesComponent implements OnInit {

  constructor(private heroService:HeroService) { }

  ngOnInit() {
    this.heroService.setName('张三');
  }
}

 

三种用法总结：

@Injectable 元数据中的providedIn属性  

//service.ts
@Injectable({providedIn:'root'})

@NgModule 元数据中的 providers属性

// service.ts
@Injectable() 

//module.ts
@NgModule({
    providers: [HeroService ]
})

@Component 元数据中的 providers属性

// service.ts
@Injectable() 

// component.ts
@Component({
  ...
  selector: 'app-heroes',
  providers: [ HeroService ]
})