proveedores de métodos de inyección angular

Hay muchas formas de registrar clases de servicio con inyectores en Angular:

Atributo ProvidedIn en metadatos @Injectable
metadatos @NgModule Atributo de proveedores en
metadatos @Component Atributo de proveedores en metadatos @Component
Cree un archivo llamado hero.service.ts llamado hero service
 hero.service.ts

import { Injectable } from '@angular/core';
 
@Injectable({
  providedIn: 'root',
})
export class HeroService {
 
  constructor() { }
 
  // 新增加setName方法
  setName(name:string):string{
    return `姓名：${name}`;
  }
 
}

1. El atributo proporcionado en metadatos @Injectable

provideIn: 'root' le dice a Angular que registre este servicio en el inyector raíz, que también es la forma predeterminada de usar la CLI para generar servicios. De
esta forma de registro, no es necesario escribir proveedores en el decorador @NgModule, y cuando el código se compila y empaqueta, se puede realizar Tree-shaking, que elimina todos los servicios no utilizados por la aplicación. Se recomienda utilizar este método para registrar el servicio

Si se usa provideIn, se usará directamente en el proyecto más adelante.

Uso: héroes.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. Atributo de proveedores en los metadatos de @NgModule

Vuelva a escribir @Injectable en hero.service.ts de la siguiente manera

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

 xx.module.ts , como app.module.ts

...
 
@NgModule({
    providers: [
        HeroService,
       // { provide: HeroService, useValue: HeroService }
    ],
})
 
...

Luego puede usar el método de extracción, lo mismo que 1 archivo heroes.component.ts

3. Atributo de proveedores en los metadatos @Component

 @Injectable en hero.service.ts, elimine {providedIn: 'root'}, igual que 2 archivos hero.service.ts

reescribir 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('张三');
  }
}

 

Resumen de los tres usos:

atributo proporcionado en metadatos @Injectable  

//service.ts
@Injectable({providedIn:'root'})

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

propiedad de proveedores en los metadatos de @NgModule

// service.ts
@Injectable() 
 
//module.ts
@NgModule({
    providers: [HeroService ]
})

atributo de proveedores en los metadatos @Component

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

Enlace original: https://blog.csdn.net/sllailcp/article/details/102548144