angular注入方法providers

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

@Injectable 元数据中的providedIn属性

@NgModule 元数据中的 providers属性

@Component 元数据中的 providers属性

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

hero.service.ts

javascript 复制代码
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

javascript 复制代码
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,如下

javascript 复制代码
import { Injectable } from '@angular/core';
 
@Injectable() // 删掉了 {providedIn: 'root'}
export class HeroService {...}

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

javascript 复制代码
...
 
@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

javascript 复制代码
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属性

javascript 复制代码
//service.ts
@Injectable({providedIn:'root'})

//component.ts
constructor(private heroService:HeroService) { }

@NgModule 元数据中的 providers属性

javascript 复制代码
// service.ts
@Injectable() 
 
//module.ts
@NgModule({
    providers: [HeroService ]
})

@Component 元数据中的 providers属性

javascript 复制代码
// service.ts
@Injectable() 
 
// component.ts
@Component({
  ...
  selector: 'app-heroes',
  providers: [ HeroService ]
})
 

原文链接:https://blog.csdn.net/sllailcp/article/details/102548144

相关推荐
mCell20 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip20 小时前
Node.js 子进程:child_process
前端·javascript
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript
阿星做前端1 天前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧1 天前
Promise 的使用
前端·javascript
前端康师傅1 天前
JavaScript 作用域
前端·javascript
云枫晖1 天前
JS核心知识-事件循环
前端·javascript
eason_fan1 天前
Git 大小写敏感性问题:一次组件重命名引发的CI构建失败
前端·javascript