Angular 从其他组件更新阵列

我刚开始使用Angular，我正在构建一个基本的应用程序。 基本上，我有一个从DB获取列表的主列表视图。 我有两个组件：列表视图和表单覆盖视图，除非用户单击添加，否则它是隐藏的

要将项目添加到列表中，用户单击一个按钮，该按钮将显示一个弹出覆盖（点击按钮后，页面的URL保持基本相同，覆盖图变为可见，用户可以在那里填写信息，然后单击添加将新项目添加到数据库。单击添加btn后，表单覆盖图再次隐藏，我们可以看到列表

**问题是为了更新列表并从服务器请求新数据，我需要更新“Items:[]”它显示列表，但我不确定如何从表单组件访问它，因为该数组在列表视图组件中声明。我应该将它们全部放在一个组件中，还是有一种方法可以使用子组件（表单视图）访问该数组并从中更新它

//*when btn is clicked the form becomes hidden and in 
here I want to update the array which is on the main-list-view component *//

  closeForm(){
    document.querySelector('.modal').classList.remove('is-active');
  }

---

谢谢！

使用Angular singleton服务来保存数据：我通过使用@output和event emitter解决了这个问题，因此基本上，一旦单击关闭表单btn，我就会发出事件，然后在父元素中调用updateList函数……这是一个好的做法吗？