我写了一个指令,它只接受实现 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
中,稍后调用。
问题:
有没有办法设置指令的模糊首先执行的优先级?
最佳答案
我用 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
更好的方法,让我知道你的想法。
关于angular - 组件 vs 指令事件优先级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42408071/