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

Posted 2023-02-22

【中文标题】在另一个模块使用此属性之前，如何使用指令添加属性？

【英文标题】：How to use a directive to add an attribute before this attribute is used by another module?

【发布时间】：2019-07-13 03:43:08

【问题描述】：

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

此模块使用带有掩码值和选项的“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)

【参考方案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);
  

【讨论】：

是的，这就是我的意思（也许我不清楚）。这是一个基于属性的指令。我可以不优先考虑我的指令以使其首先发生，以便它应用掩码模块随后能够用来设置掩码的属性吗？

它不是属性。这就是我要说的。

嗯，在模板上，这其实是一个属性。我使用 [] 使其动态化并使用后面的代码，但我可以使用 textMask="mask: [/[0-3]/, /\d/, "/", /[0-1]/, /\d/, "/", /[12]/, /[09]/, /\d/, /\d/], placeholderChar: '\u2000', keepCharPositions: true" 它也可以。我只想在使用 mask 指令之前使用指令来修改我的模板。

我尝试了您的解决方案来派生掩码指令，但我收到了 StaticInjectorError(AppModule)[DateMaskDirective -> Boolean] 错误。我更新了我的问题，提供了更多详细信息。

问题是：你的组件的 .html 文件中的“代码”被 Angular 解析并产生一个 ngfactory 类。然后这个类将用于创建实际的组件实例。所以，再说一遍：它不是 HTML DOM 元素的属性。它只是看起来像属性的文本。当您考虑启用 AOT 时会发生什么时，可能会变得更加明显。在这种情况下，ngfactory 类是在构建时创建的，因此很明显，您在运行时添加的任何属性都不会在这里产生任何影响。