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

相关推荐
gzzeason5 分钟前
Ajax:现代JS发起http通信的代名词
前端·javascript·ajax
iphone10812 分钟前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
iccb101340 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
宇宙全栈Link1 小时前
当 React 组件调用自定义 hooks,hooks 又调用其他 hooks 时,状态变化如何传播?
前端·javascript·react.js
南方kenny1 小时前
从0到1理解JS事件委托:让你的代码性能提升一个level
前端·javascript
西瓜树枝1 小时前
用 iframe 实现前端批量下载的优雅方案 —— 从原理到实战
前端·javascript
归于尽1 小时前
原生JS与React的事件差异
前端·javascript·react.js
独立开阀者_FwtCoder1 小时前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
独立开阀者_FwtCoder1 小时前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder1 小时前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js