标签：依赖 providers HeroService ts providedIn Injectable heroes angular

使用命令创建一个文件名叫名 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。