angular依赖注入之angular 服务providers

使用命令创建一个文件名叫名 hero.service.ts叫 hero 的服务，如果你是用 Angular CLI 创建的应用，那么可以使用下列 CLI 的 ng generate 命令在项目根目录下创建一个服务。
ng generate service hero

该命令会创建下列 HeroService 骨架：

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root',
})
export class HeroService {
 
  constructor() { }
 
  // 新增加setName方法
  setName(name:string):string{
    return `姓名：${name}`;
  }
}

该服务本身是 CLI 创建的一个类，并且加上了 @Injectable() 装饰器。默认情况下，该装饰器是用 providedIn 属性进行配置的，它会为该服务创建一个提供者。在这个例子中，providedIn: 'root' 指定 Angular 应该在根注入器中提供该服务。

---

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

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

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

providedIn: 'root' 告诉 Angular在根注入器中注册这个服务,这也是使用CLI生成服务时默认的方式。

这种方式注册,不需要再@NgModule装饰器中写providers,而且在代码编译打包时,可以执行摇树优化，会移除所有没在应用中使用过的服务。推荐使用此种方式注册服务。
使用：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('张三');
 }
}

三种使用方法总结：

1. @Injectable 元数据中的providedIn属性，当你把服务提供者添加到应用的根注入器中时，它就在整个应用程序中可用了。
2. @NgModule 元数据中的 providers属性，也可以规定某个服务只有在特定的 @NgModule 中提供。比如，如果你希望只有当消费方导入了你创建的 UserModule 时才让 UserService 在应用中生效，那就可以指定该服务要在该模块中提供：
3. @Component 元数据中的 providers属性，在组件中提供服务，会限定该服务只能在该组件及其子组件中有效，而同一模块中的其它组件不能访问它。

标签：依赖,providers,HeroService,ts,providedIn,Injectable,heroes,angular
来源： https://www.cnblogs.com/zhangchangchang/p/16292187.html