Appearance
Comment injecter une simple valeur + bonne pratique ​
Il est tout Ă fait possible d'injecter une simple valeur dans un service ou un composant Angular en utilisant la fonction inject()
fournie par Angular. Cela peut être utile pour injecter des valeurs de configuration ou des dépendances qui ne sont pas des services.
1. Déclarer dans le provider ​
Dans app.config.ts
, on peut déclarer une valeur à injecter :
ts
import { ApplicationConfig } from '@angular/core';
export const appConfig: ApplicationConfig = {
providers: [
{ provide: 'BASE_URL', useValue: 'https://my-api.com' }
]
};
useValue
permet de fournir une valeur constante Ă injecter.
2. Injecter dans un service ou un composant ​
Ensuite, on peut l'injecter dans un service ou un composant :
ts
import { Inject } from '@angular/core';
@Injectable({
providedIn: 'root'
})
class MyService {
private baseUrl = inject('BASE_URL')
}
La bonne pratique avec InjectionToken ​
Le problème de ci-dessus est que la chaîne de caractères 'BASE_URL'
est sujette aux erreurs de frappe et ne bénéficie pas de la vérification du compilateur TypeScript. De plus, vous pouvez avoir des collisions de noms si vous avez plusieurs valeurs à injecter.
Pour résoudre ce problème, Angular fournit une classe InjectionToken
qui permet de créer un token d'injection pour une valeur donnée. Voici comment l'utiliser :
1. Créer un InjectionToken ​
Créer un fichier app.tokens.ts
:
ts
import { InjectionToken } from '@angular/core';
export const BASE_URL = new InjectionToken<string>('BASE_URL');
2. Déclarer dans le provider ​
Dans app.config.ts
, on peut déclarer une valeur à injecter :
ts
import { ApplicationConfig } from '@angular/core';
import { BASE_URL } from './app.tokens';
export const appConfig: ApplicationConfig = {
providers: [
{ provide: BASE_URL, useValue: 'https://my-api.com' }
]
};
3. Injecter dans un service ou un composant ​
Ensuite, on peut l'injecter dans un service ou un composant :
ts
import { inject, Vomponent } from '@angular/core';
import { BASE_URL } from './app.tokens';
@Component({
selector: 'app-root',
standalone: true,
template: `
<p>{{baseUrl}}</p>
`
})
export class AppComponent {
baseUrl = inject(BASE_URL)
}