コンポーネントとディレクティブイベントの優先度

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で上記の問題を解決しました。私は、ディレクティブの1 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(); 
} 

を放射します：

唯一のディレクティブの blur後に呼び出します この場合で

<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モデルが常に更新されることを保証します。

私はイベントonDirectiveBlurを含むよりも良い方法があると感じているので、これを回答として受け入れていません。あなたの考えを教えてください。