在另一个模块使用此属性之前，如何使用指令添加属性？

Question

我添加了一个模块，让我可以在输入上放置一个掩码。

此模块使用带有掩码值和选项的“textMask”属性（例如：[textMask]="{mask: dateMask, placeholderChar: '\u2000', keepCharPositions: true}" 和后面的代码：public dateMask = [/[0-3]/, /\d/, "/", /[0-1]/, /\d/, "/", /[12]/, /[09]/, /\d/, /\d/]; 用于法语日期掩码）。

与其将这个掩码添加到每个日期输入和每个组件后面的代码，我更愿意创建一个指令，将属性添加到每个日期输入。

所以，我这样做了：

import { Directive, ElementRef, Renderer } from '@angular/core';

@Directive({
  selector: 'input[matDatepicker]'
})
export class DateMaskDirective {
  constructor(private el: ElementRef<HTMLElement>, private renderer: Renderer) {
    this.renderer.setElementAttribute(this.el.nativeElement, '[textMask]', '{ mask: [/[0-3]/, /\d/, "/", /[0-1]/, /\d/, "/", /[12]/, /[09]/, /\d/, /\d/], placeholderChar: "\u2000", keepCharPositions: true }');
  }
}

问题是，即使添加了属性，掩码模块也不会对其进行解释。是优先级的问题吗？我该如何解决？

屏蔽模块链接：https://github.com/text-mask/text-mask/tree/master/angular2#readme

编辑

我尝试了 Daniel Hilgarth 的解决方案（派生掩码指令），如下所示：

import { Directive, ElementRef, Renderer2 } from '@angular/core';
import { MaskedInputDirective, TextMaskConfig } from 'angular2-text-mask';

@Directive({
  selector: 'input[matDatepicker]'
})
export class DateMaskDirective extends MaskedInputDirective {
  public textMaskConfig: TextMaskConfig = {
    mask: [/[0-3]/, /\d/, "/", /[0-1]/, /\d/, "/", /[12]/, /[09]/, /\d/, /\d/],
    guide: true,
    placeholderChar: '\u2000',
    keepCharPositions: true,
    showMask: true
  }

  constructor(private el: ElementRef<any>, private renderer: Renderer2, _compositionMode: boolean) {
    super(renderer, el, _compositionMode);
  }
}

但我收到以下 Angular 错误：

ERROR Error: StaticInjectorError(AppModule)[DateMaskDirective -> Boolean]:
StaticInjectorError(Platform: core)[DateMaskDirective -> Boolean]:
NullInjectorError: No provider for Boolean!
    at NullInjector.push../ node_modules /@angular/core/fesm5 / core.js.NullInjector.get(core.js: 691)
    at resolveToken(core.js: 928)
    at tryResolveToken(core.js: 872)
    at StaticInjector.push../ node_modules /@angular/core/fesm5 / core.js.StaticInjector.get(core.js: 769)
    at resolveToken(core.js: 928)
    at tryResolveToken(core.js: 872)
    at StaticInjector.push../ node_modules /@angular/core/fesm5 / core.js.StaticInjector.get(core.js: 769)
    at resolveNgModuleDep(core.js: 17435)
    at NgModuleRef_.push../ node_modules /@angular/core/fesm5 / core.js.NgModuleRef_.get(core.js: 18124)
    at resolveDep(core.js: 18495)

Answer 1

这不是一个属性。这是它自己的指令。 一种可能的解决方案是从他们的指令中导出您的指令。

尝试这样的事情（未经测试，但重要的是布尔构造函数参数上的装饰器）：

import { Directive, ElementRef, Renderer2 } from '@angular/core';
import { MaskedInputDirective, TextMaskConfig } from 'angular2-text-mask';

@Directive({
  selector: 'input[matDatepicker]'
})
export class DateMaskDirective extends MaskedInputDirective {
  public textMaskConfig: TextMaskConfig = {
    mask: [/[0-3]/, /\d/, "/", /[0-1]/, /\d/, "/", /[12]/, /[09]/, /\d/, /\d/],
    guide: true,
    placeholderChar: '\u2000',
    keepCharPositions: true,
    showMask: true
  }

  constructor(private el: ElementRef<any>, private renderer: Renderer2, @Optional() @Inject(COMPOSITION_BUFFER_MODE) _compositionMode: boolean) {
    super(renderer, el, _compositionMode);
  }
}