如何在父级和子级之间共享过滤的对象数组

Question

我正在根据所选标准过滤位置的对象数组，现在我想将该过滤数组传递给子组件和兄弟组件，我不确定什么是最好的方法。

我在Stackblitz上创建了一个小模型https://stackblitz.com/edit/angular-ivy-dgxjyj

正如你所看到的，过滤器管道在过滤器组件(父组件)中工作得很好——我只是不知道如何用相同的结果更新其他子组件和兄弟组件。也许我把它弄得太复杂了。

我已经尝试存储过滤后的数组，然后通过使用@Output装饰器传递它。

Answer 1

我看了你的Stackblitz代码。具有以下结构

<my-app> //parent
<app-filter></app-filter> //Child to my-app and sibling to other two
<app-my-locations></app-my-locations> //child to my-app and sibling to other two
<app-my-map></app-my-map> //child to my app and sibling to other two
</my-app>

无论如何，在您的示例中，在filter component中，您必须向父(<my-app>)发出过滤位置。参考这个angular文档

然后，您必须通过输入装饰器将数据发送到其他两个组件(my-location, my-map)。参考本文档