Как использовать директиву для добавления атрибута до того, как этот атрибут используется другим модулем? - PullRequest
Новая
       36

Как использовать директиву для добавления атрибута до того, как этот атрибут используется другим модулем?

0 голосов
/ 19 февраля 2019

Я добавил модуль, который позволяет мне накладывать маску на вход.

Этот модуль работает с атрибутом '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

РЕДАКТИРОВАТЬ

Я испробовал решение Дэниэла Хилгарта (директива получения маски)вот так: 

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)

1 Ответ

0 голосов
/ 19 февраля 2019

Это не атрибут.Это отдельная директива.Одним из возможных решений было бы получить вашу директиву из их директивы.

Попробуйте что-то вроде этого (непроверенный, но важный - декоратор для параметра логического конструктора): 

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