компонент с приоритетом приоритета приоритета

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

выше логика работает отлично, но проблема возникает, когда я добавить (blur) на HTML компонентного элемента, как показано ниже:

<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, сообщите мне свои мысли.