6

我们很清楚有多种方法可以为导入的模块设置配置。我们有 '.forRoot()'、'useValue'、'useClass' 等要在导入模块中使用。

例如，我们想使用ng2-currency-mask。直接从文档中的示例用法中获取，我们可以CurrencyMaskModule通过在导入模块（在本例中为 AppModule）中执行此操作来设置配置：

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 {}

但是，如果您想useValue动态设置 config/ （例如设置页面），我们必须从组件中更改它。现在我使用以下直接编写的代码进行了测试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() {
  }
}

不幸的是，这种变化并没有反映到使用的组件上，ng2-currency-mask并且从AppModule（带有“Module$” asprefix的那个）设置的配置仍然有效。

您如何从组件中成功覆盖/设置模块的配置？

更新：

我尝试过使用ReflectiveInjector'sresolve和fromResolvedProviders方法也不起作用：

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);
  }
}

并且使用静态Injector不起作用：

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

旁注：我很清楚这个特定模块（CurrencyMaskModule）的替代解决方案，我们实际上可以只创建一个具有可变属性的提供程序来保存该CurrencyMaskConfig值。但这将让我被迫更改所有输入字段以options使用该currencyMask指令向所有输入字段添加属性。换句话说，我将[options]="myConfigProvider.currencyMaskConfig"在所有需要它的输入中插入类似的东西。我希望看到一种更好/更优雅的方式来做到这一点。

4

0 回答 0