获取子元素或组件的焦点信息

Question

I am having a component which may have several child components at same level like

<parent>
  <input />
  <child>
    <input />
  </child>
  <child></child>
  <child></child>
</parent>

Either of child or parent may have input elements.

I am trying to get is if any of input element gets focus then its parent should get a call (other than manual). And if child component gets this info of input getting focus should be able to propagate it to parent without using EventEmitter .

I can use event emitter but if nesting of child increases then it would not be a good way. Can we do it more simpler?

Answer 1

Use:

@ViewChild in order to get reference to the Childs and access their data from the Parent.

@Input to pass data from the Parent to the Childs.

@Output in order to trigger events from the Childs to the Parent.

If you don't want to use @Output a workaround that you could use is RxJS BehaviorSubject ( example here ). Basically you emit values from the child using that BehaviorSubject and then you subscribe to those changes from the Parent.