Question

我写了一个指令，只接受实现ControlValueAccessor的数字。

该特定元素的

onBlur我将更新其模型，如下所示。

@HostListener('blur',['$event']) onBlur(event) {
    this.directiveModel = this.getOnlyNumberLogic();
    this.propagateChange(this.directiveModel); <-- update model
    this.renderer.setElementProperty(this.el.nativeElement, 'value', this.directiveModel);
  }

上述逻辑非常有效，但是当我在组件元素的HTML上添加(blur)时会遇到问题：

<input type="text" name="number"
    #numberId="ngModel"
    required
    [(ngModel)]="obj.number"
    pattern="^\d{11}(?:\d{5})?$"
    numberOnly   <---- Directive
    (blur)="numberId.valid && onNumberBlur(numberId.value)"
    maxlength="16"/>

组件的(blur)每次首先执行，然后是指令@HostListener('blur')，因此[(ngModel)]不会更新为this.propagateChange() {1}}在指令中blur稍后会被调用。

问题：

无论如何设置优先级指令的模糊应该首先执行吗？

Answer 1

我用EventEmitter解决了上述问题。我有一个EventEmitter指令：

@Output() onDirectiveBlur = new EventEmitter();

然后在指令的模糊中，我会发出这个事件，

@HostListener('blur',['$event']) onBlur(event) {
  this.directiveModel = this.getOnlyNumberLogic();
  this.propagateChange(this.directiveModel); <-- update model
  this.renderer.setElementProperty(this.el.nativeElement, 'value', this.directiveModel);
  this.onDirectiveBlur.emit();
}

与组件的HTML中的元素绑定，如下所示：

 <input type="text" name="number"
    #numberId="ngModel"
    required
    [(ngModel)]="obj.number"
    pattern="^\d{11}(?:\d{5})?$"
    numberOnly   <---- Directive
    (onDirectiveBlur)="numberId.valid && onNumberBlur(numberId.value)"
    maxlength="16"/>

在这种情况下，组件（自定义）blur只会在指令blur之后调用，并保证模型始终会更新。

我不接受这个作为答案（暂时），因为我觉得有一些比包括事件onDirectiveBlur更好的方法，让我知道你的想法。

组件与指令事件优先级

1 个答案: