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

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

0 голосов
/ 25 мая 2018

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

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

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

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

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

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

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

1 Ответ

0 голосов
/ 25 мая 2018

Вы можете использовать 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";
}
...