首页 > 解决方案 > 获取子元素或组件的焦点信息

问题描述

我有一个组件,它可能有几个相同级别的子组件,例如

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

孩子或父母中的任何一个都可能有input元素。

我想得到的是,如果任何输入元素获得焦点,那么它的父元素应该得到一个调用(除了手动)。如果子组件获得输入获取焦点的信息应该能够将其传播给父组件而不使用EventEmitter.

我可以使用事件发射器,但如果孩子的嵌套增加,那么这不是一个好方法。我们可以做得更简单吗?

标签: javascriptangulareventsdom-events

解决方案


利用:

@ViewChild为了获得对孩子的参考并从父母那里访问他们的数据。

@Input将数据从父级传递给子级。

@Output为了触发从 Childs 到 Parent 的事件。

如果您不想使用@Output,您可以使用 RxJS BehaviorSubject此处为示例)的解决方法。基本上,您使用该 BehaviorSubject 从子级发出值,然后您从父级订阅这些更改。


推荐阅读