組件與指令事件優先級

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();

然後在指令的模糊我會發出這樣的事件，這是與該元素在組件的HTML綁定，如下面

@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(); 
} 

：

<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 a之後調用nd保證模型將始終得到更新。

我不接受這個答案（現在），因爲我覺得會有比事件onDirectiveBlur更好的方式，讓我知道你的想法。