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

相关推荐
10年前端老司机10 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星11 分钟前
vue实现微信聊天emoji表情
前端·javascript
極光未晚13 分钟前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
Rrvive15 分钟前
原型与原型链到底是什么?
javascript
極光未晚1 小时前
JavaScript BOM 对象:浏览器的隐形控制塔
前端·javascript·源码
天涯学馆1 小时前
网站秒变 App!手把手教你搞定 PWA
前端·javascript·面试
用户9272472502191 小时前
PHP + CSS + JS 数据采集与展示系统
javascript
小样还想跑2 小时前
axios无感刷新token
前端·javascript·vue.js
字节跳跃者2 小时前
为什么Java已经不推荐使用Stack了?
javascript·后端
字节跳跃者2 小时前
深入剖析HashMap:理解Hash、底层实现与扩容机制
javascript·后端