Il existe de nombreuses façons d'enregistrer des classes de service avec des injecteurs dans Angular :
L'attribut ProvidedIn dans les métadonnées @Injectable
L'attribut des fournisseurs de métadonnées @NgModule
dans l'attribut des fournisseurs de métadonnées @Component
crée un fichier nommé hero.service.ts appelé 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. L'attribut provideIn dans les métadonnées @Injectable
provideIn: 'root' indique à Angular d'enregistrer ce service dans l'injecteur racine, qui est également le moyen par défaut de générer des services à l'aide de la CLI.Cette méthode d'enregistrement
, pas besoin d'écrire des fournisseurs dans le décorateur @NgModule, et lorsque le code est compilé et empaqueté, Tree-shaking peut être effectué, ce qui supprime tous les services non utilisés par l'application. Il est recommandé d'utiliser cette méthode pour enregistrer le service
Si provideIn est utilisé, il sera utilisé directement dans le projet ultérieurement.
Utilisation : 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']
})
export class HeroesComponent implements OnInit {
constructor(private heroService:HeroService) { }
ngOnInit() {
this.heroService.setName('张三');
}
}
2. Attribut de fournisseurs dans les métadonnées @NgModule
Réécrivez @Injectable dans hero.service.ts comme suit
import { Injectable } from '@angular/core';
@Injectable() // 删掉了 {providedIn: 'root'}
export class HeroService {...}
xx.module.ts , comme app.module.ts
...
@NgModule({
providers: [
HeroService,
// { provide: HeroService, useValue: HeroService }
],
})
...
Ensuite, vous pouvez utiliser la méthode pull, identique à 1 fichier heroes.component.ts
3. Attribut des fournisseurs dans les métadonnées @Component
@Injectable dans hero.service.ts, supprimez {providedIn : 'root'}, identique à 2 fichiers hero.service.ts
réécrire 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('张三');
}
}
Résumé des trois usages :
attribut provideIn dans les métadonnées @Injectable
//service.ts
@Injectable({providedIn:'root'})
//component.ts
constructor(private heroService:HeroService) { }
attribut de fournisseurs dans les métadonnées @NgModule
// service.ts
@Injectable()
//module.ts
@NgModule({
providers: [HeroService ]
})
attribut de fournisseurs dans les métadonnées @Component
// service.ts
@Injectable()
// component.ts
@Component({
...
selector: 'app-heroes',
providers: [ HeroService ]
})
Lien d'origine : https://blog.csdn.net/sllailcp/article/details/102548144