Angular 8: родительский компонент обнаруживает, когда пользователь щелкает текстовое поле дочернего компонента

Question

У меня есть родительский компонент и дочерний компонент с текстовым полем Formbuilder и ZipCode.

Как мне сделать так, чтобы, когда пользователь щелкает текстовое поле дочернего компонента, родительский компонент будет знать? Необходимо запустить бизнес логи c после того, как пользователь щелкнет из текстового поля. В настоящее время текстовое поле основано на материале Angular обертка.

Дочерний компонент имеет Formbuilder и множество текстовых полей, пример ниже

this.editAddressForm = this.formBuilder.group({
   'city': [null,[Validators.maxLength(50)]],
   'zipCode': [null,[Validators.maxLength(10)]],


<app-input-textbox class = "zipcodeclass" div="zipcode" formControlName = "zipCode">

Answer 1

Вам необходимо отправить событие родителю при blur событии.

В шаблоне HTML добавьте (blur)="onBlur()" и ссылку на шаблон на каждый input (скажем, * 1006). *, #templateReference2 и #templateReference3)

Затем в дочернем элементе:

@Output() noInputFocused: = new EventEmitter();

@ViewChild('templateReference1') templateReference1: ElementRef;
@ViewChild('templateReference2') templateReference2: ElementRef;
@ViewChild('templateReference3') templateReference3: ElementRef;

inputs;

constructor(@Inject(DOCUMENT) private document: Document) {}

ngOnInit() {
    this.inputs = [templateReference1, templateReference2, templateReference3];
}

onBlur() {
    if(this.inputs.map(x => x.nativeElement).indexOf(this.document.activeElement) < 0) {
        this.noInputFocused.next();
    }
}