组件 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 中的元素绑定，如下所示：

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