angular - Hur man sätter konfiguration (eller useValue) för importerade moduler från en komponent?

Vi är väl medvetna om att det finns olika sätt att ställa in konfiguration för importerade moduler. Vi har '.forRoot()', 'useValue', 'useClass' och liknande att använda i den importerande modulen.

Säg till exempel att vi vill använda ng2-currency-mask. Genom att ta direkt från dess exempel på användning i dokumentationen kan vi ställa in konfigurationen för CurrencyMaskModule genom att göra detta i den importerande modulen (AppModule i detta fall):

export const CustomCurrencyMaskConfig: CurrencyMaskConfig = {
    align: "right",
    allowNegative: true,
    decimal: ",",
    precision: 2,
    prefix: "Module$ ",
    suffix: "",
    thousands: "."
};

@NgModule({
    imports: [
        ...
        CurrencyMaskModule
    ],
    declarations: [...],
    providers: [
        { provide: CURRENCY_MASK_CONFIG, useValue: CustomCurrencyMaskConfig }
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}

Men om du vill ställa in config/useValue dynamiskt (t.ex. en inställningssida), måste vi ändra det från en komponent. Nu testade jag att göra det med följande kod skriven direkt i AppComponent:

import { Component, OnInit, Inject } from '@angular/core';
import { CURRENCY_MASK_CONFIG, CurrencyMaskConfig } from 'ng2-currency-mask/src/currency-mask.config';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'Testing Config App';

  constructor(
    @Inject(CURRENCY_MASK_CONFIG) ng2CurrencyMaskConfig: CurrencyMaskConfig,
  ) {
    // test
    ng2CurrencyMaskConfig =  {
      align: 'right',
      allowNegative: false,
      decimal: '.',
      precision: 5,
      prefix: 'Component$$$ ',
      suffix: '',
      thousands: ','
    };
  }

  ngOnInit() {
  }
}

Tyvärr reflekterades inte ändringen på komponenterna som använder ng2-currency-mask och konfigurationen som är satt från AppModule (den med "Module$ " som prefix) är fortfarande den som fungerar.

Hur åsidosätter/anger man framgångsrikt en moduls konfiguration från en komponent?

UPPDATERING:

Jag har försökt använda ReflectiveInjector:s resolve och fromResolvedProviders-metoder vilket inte heller fungerar:

import { Component, OnInit, ReflectiveInjector, Injector } from '@angular/core';
import { CURRENCY_MASK_CONFIG, CurrencyMaskConfig } from 'ng2-currency-mask/src/currency-mask.config';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'Testing Config App';

  constructor(
    private injector: Injector,
  ) {
  }

  ngOnInit() {
     // test
     const ng2CurrencyMaskConfig: CurrencyMaskConfig =  {
      align: 'right',
      allowNegative: false,
      decimal: '.',
      precision: 3,
      prefix: 'TESTR$ ',
      suffix: '',
      thousands: ','
    };

    const providers = ReflectiveInjector.resolve([{ provide: CURRENCY_MASK_CONFIG, useValue: ng2CurrencyMaskConfig }]);
    ReflectiveInjector.fromResolvedProviders(providers, this.injector);
  }
}

Och att använda statisk Injector fungerar inte:

Injector.create(
[
    { 
        provide: CURRENCY_MASK_CONFIG, 
        useValue: ng2CurrencyMaskConfig 
    }
], 
this.injector);

Sidnot: Jag är väl medveten om en alternativ lösning för denna specifika modul (CurrencyMaskModule) där vi faktiskt bara kan skapa en provider med en förändringsbar egenskap som kommer att hålla CurrencyMaskConfig-värdet. Men detta skulle tvinga mig att ändra alla inmatningsfält för att lägga till ett attribut options på alla inmatningsfält som använder currencyMask-direktivet. Med andra ord, jag skulle infoga något som [options]="myConfigProvider.currencyMaskConfig" i alla de fälten som behöver det. Jag hoppas på att se ett bättre/mer elegant sätt att göra detta.

Relaterade artiklar