angular - 组件 vs 指令事件优先级

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() 位于指令的 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 中的元素绑定(bind)，如下所示:

 <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 更好的方法，让我知道你的想法。