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

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