Angular 角度5+组件通信的两种方法和可能的问题

下面是两个Stackblitz项目，展示了组件通信

更新：我想我可以嵌入Stackblitz的编辑器，但没办法

方法1：仅使用服务中的数组：

data.service.ts：

从“@angular/core”导入{Injectable}； @注射的 导出类数据服务{ 人物：数组=[ {名字：'大卫'，角色：'以色列国王'}， {名字：'但以理'，角色：'先知少校'} ]; 状态={ 味精： } 构造函数{console.logthis.people} } app.component.ts：

@组成部分{ 选择器：“我的应用程序”， templateUrl:“./app.component.html”， 样式URL:['./app.component.css'] } 导出类AppComponent实现OnInit{ 人物：阵列； 状态 构造函数私有数据服务：数据服务{} 恩戈尼特{ this.people=this.dataService.people； this.state=this.dataService.state； } 装载{ this.dataService.people.push{name:'Obadiah'，role:'Minor Prophet'}； } } app.component.html

{{person.name}}{{person.role}} 加载附加数据 方法2：使用服务提供的RxJS主题

data.service.ts：

@注射的 导出类数据服务{ url='1〕http://localhost:3000/Data'; dataStream$=新主题； 消息：字符串[]=[]； 订阅 httpOptions={ 标题：新的HttpHeaders{“内容类型”：“应用程序/json”，“缓存控制”：“无缓存”} }; 构造函数私有http:HttpClient{} 得到{ this.subscription=this.http.getthis.url.subscriptedata=>this.dataStream$.nextdata； } postobj:MyModel{ this.subscription=this.http.posthis.url，obj，this.httpOptions .subscriberes=>this.get，err=>this.messages.pusher， =>添加了this.messages.push“${obj.title}”； } }

app.component.ts

@组成部分{ 选择器：“我的应用程序”， templateUrl:“./app.component.html”， 样式URL:['./app.component.css'] } 导出类AppComponent实现OnInit{ dataStream$=新主题； 消息：字符串[]=[]； obj={ 标题：“ε”， 正文：“Lorem ipsum…” } 构造函数私有数据服务：数据服务{} 恩戈尼特{ this.dataStream$=this.dataService.dataStream$； this.dataService.get； this.messages=this.dataService.messages； } 邮政{ this.dataService.posthis.obj； } } app.component.html：

添加帖子 我需要知道这些方法中是否有一种是首选的，以及为什么

---

以这种方式使用RxJS是否过度了

我认为反应式函数编程的好处之一是确保数据的纯度，并且更容易跟踪数据发生突变的位置。这实际上是关于声明式编程方法和命令式编程方法

第一种方法更易于编码，因为您不必关心何时何地推送数据，其他组件可以在不通知任何组件的情况下，通过这个.dataService.people=[a，b，c]轻松地更新属性

第二种方法虽然可以写得更好，但数据包含在流中，数据只有一个入口点，只要代码是可靠的，就不容易出错

---

已经说过，学习曲线是相当陡峭的，正确地做它，例如链式切割、切片联合收割机链、错误处理、第二种方法的异步处理

代码在哪里？添加了代码。问题更新。感谢您的回复。需要澄清的是：其他组件可以通过this.dataService.people=[a，b，c]静默更新属性，而不通知任何组件，因为任何具有与该数组关联的属性的组件都会知道更新的数组-至少组件的视图会知道。并澄清：第二种方法…数据包含在流中，数据只有一个入口点。是的，组件将正确呈现数组。但在任何错误完整性问题的情况下，它都会悄无声息地发生。我可以在任何组件中的任何位置注入您的服务并对其进行更新，除非您在dataservice中小心地放置了setter函数，或者很难跟踪它发生在哪里。这是OO状态管理的一般问题，如果做得不对，再次感谢。关于第二种方法的澄清如何？只有一个入口点。另外，如果你愿意分享，我当然愿意写得更好。第二种方法是将数据封装在datastream$中，唯一改变它的方法是触发get api调用。可以轻松监控和跟踪数据更改。是的，您是正确的。方法二是保持单一的真相来源。对于方法二，一个更好的想法是。下一个是不可变的对象，例如[]。concatdata，有时我们也会在不知道的情况下通过引用对数据进行变异。