Question

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

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

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

但是，如果要动态设置config / useValue（例如，“设置”页面），则必须在组件内部进行更改。现在，我使用直接写在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 $”为prefix的配置仍然有效）

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

更新：

我尝试使用ReflectiveInjector的{{1}}和resolve方法，这些方法也不起作用：

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的内容。我希望看到一种更好/更优雅的方法。

如何为从组件导入的模块设置config（或useValue）？

0 个答案: