组件 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，让我知道你的想法。

组件 vs 指令事件优先级

component vs directive event priority

components

typescript

angular2-directives

angular