Родительский компонент слушает фокус на входе, содержащемся в дочернем компоненте

Question

У меня есть компонент (дочерний) в html-странице другого компонента (родительского), подобный этому:

<div>
   <child-component (focusEmit)="startAnimation()"></child-component>
</div>

В дочернем компоненте есть вход:

<input type="text" (focus)="focusFunction()"/>

focusFunction () отправляет событие родителю, который что-то делает.

Я не хочу разрешать этот вариант использования таким способом.Я хотел бы, чтобы дочерний компонент был чистым (потому что у меня есть другой вложенный компонент, этот вариант использования упрощен, и я не хочу длинную цепочку выходных данных).

Есть другой способ, который являетсяродитель, чтобы поймать фокус события во входных данных, содержащихся в его дочернем компоненте?

Answer 1

Вы можете использовать Subject (rxJs) http://reactivex.io/rxjs/manual/overview.html#subject, который является альтернативой EventEmitter.

---

Через @Output eventEmitter это можно сделать следующим образом

Дочерний компонент

@Output() focusEmit = new EventEmitter<any>();

focusFunction() {
   this.focusEmit.emit(true);
}

Родительский компонент

HTML

 <child-component (focusEmit)="startAnimation(event)"></child-component>

component.ts

startAnimation($event) {
    // Handle your code
}

---

С шаблоном ViewChild

Родительский компонент

<child-component  #childAttr></child-component>

@ViewChild("childAttr") childAttr;
childAttrId : string;

startAnimation() {
    this.childAttrId  = childAttr.id;
}

Но ваш дочерний компонент остается тем же

focusFunction() {
   this.id = "focus triggered";
}