Comment puis-je amener ma classe à reconnaître cette énumération?

Question

J'ai une énumération que j'essaye d'injecter dans une classe à une application angulaire.

Je ne peux pas tapuscrit de reconnaître les propriétés du ENUM et obtenir l'erreur Property 'xs' does not exist on type 'appBreakpoints'

code:

// appBreakpoints.ts file 
export enum appBreakpoints { 
    xs = 1, // convert xs to truthy value 
    sm, 
    md, 
    lg, 
    xl, 
    xxl 
} 

// In app.module 
import { appBreakpoints } from './appBreakpoints' 
@NgModule({ 
    providers: [ 
     { provide: appBreakpoints, useValue: appBreakpoints} 
    ] 
}); 

// In some service 
import { appBreakpoints } from './appBreakpoints'; 
import { Inject } from '@angular/core'; 
class MyClass { 
    constructor(@Inject(appBreakpoints) private appBreakpoints: appBreakpoints) { 
     if (0 < this.appBreakpoints.xs) { // TS ERROR: Property 'xs' does not exist on type 'appBreakpoints' 
      console.log('something being logged'); 
     } 
    } 
} 

Comment puis-je obtenir tapuscrit de reconnaître les propriétés ENUM je peux les utiliser dans ma classe? Pourquoi voulez-vous utiliser un DI angulaire pour cela?

Answer 1

Je ne comprends pas pourquoi vous voulez faire un service de ce ENUM insted d'utiliser directement depuis le service.

Mais le problème est que la valeur fournie est la appBreakpoints enum (ie la classe ENUM lui-même), alors ce que vous injectez dans votre constructeur est de appBreakPoints de type, et est donc censé être un exemple de appBreakpoints (c.-à- xs, ou sm, etc.).

Pour que votre code, vous devez modifier le service à

constructor(@Inject(appBreakpoints) private bp: typeof appBreakpoints) { 
    if (0 < this.bp.xs) { 
     console.log('something being logged'); 
    } 
} 

Answer 2

Pourquoi? Je suppose que juste assez pour importer le fichier et utiliser le ENUM ...

// In some service 
import { appBreakpoints } from './appBreakpoints'; 

class MyClass { 
    constructor() { 
     if (0 < appBreakpoints.xs) { 
      console.log('something being logged'); 
     } 
    } 
} 

Quoi qu'il en soit, selon cette question angulaire/cli, vous devez utiliser InjectionToken pour obtenir ce travail:

Vous ne pouvez pas utiliser un type pur pour injecter, par exemple une énumération ou une interface. Vous aurez besoin d'utiliser un InjectionToken, comme l'a souligné @jotatoledo. Veuillez suivre la documentation d'Angular pour obtenir de l'aide sur l'utilisation des jetons.

https://github.com/angular/angular-cli/issues/8011

https://angular.io/api/core/InjectionToken