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

相关推荐
遂心_3 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
遂心_3 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
前端Hardy3 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy4 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
一个不爱写代码的瘦子4 小时前
迭代器和生成器
前端·javascript
源猿人8 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
RoyLin8 小时前
TypeScript设计模式:迭代器模式
javascript·后端·node.js
小桥风满袖10 小时前
极简三分钟ES6 - ES9中for await of
前端·javascript
编程贝多芬10 小时前
Promise 的场景和最佳实践
前端·javascript
Asort10 小时前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript