问如何使用指令在其他模块使用该属性之前添加属性？
EN

Stack Overflow用户

提问于 2019-02-19 07:21:03

回答 1查看 852关注 0票数 0

我增加了一个模块，让我在输入上设置一个掩码。

该模块与属性'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);
  }
}

但我得到了以下角度误差：

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)

angular

angular2-directives

angular-directive

回答 1

Stack Overflow用户

发布于 2019-02-19 07:23:32

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

尝试这样的方法(未经测试，但重要的是布尔构造函数参数上的装饰器)：

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