Angular 用service 在组件间传递数据

Posted 2023-04-23

参考技术A 0，把service中的数据传给组件：

1, 创建Service.ts file

--所有需要维护的数据

--一个数据对应一个EventEmitter

--对数据的set，get或其他操作

2，创建trigger component 该文件用于关联html和ts中的emit，html中绑定了onSetToActive方法，在onSetToActive方法中调用service中的event。

3，trigger事件被创建， 接下来创建listen方法监听。

用对应EventEmitter的subscribe方法监听，在subscribe方法中写监听到后，具体对service数据的操作，一般这个操作是写在service.ts中。

备注：

有关service的dependecy inject

1，创建service

2，引入module（import），引入provider，在construc中引入（别忘加private）

3，引入module（import），在construc中需要每用到一次都引入，但providers只要在最顶层引入即可（子组件都可以用）

Vue父子组件间通信（数据传递）

参考技术A

父---props--->子
子---props/自定义事件/全局事件总线/消息订阅与发布--->父
任意组件间通信：/自定义事件/全局事件总线/消息订阅与发布/Vuex/路由传参

父组件传递：在使用子组件时，使用 v-bind：自定义接收名称="要传递的数据"
子组件接收： props:["自定义接收名称"]

父组件传递： v-on:自定义接收名称="要传递的方法"
子组件接收时自定义一个方法，在方法中触发父组件传递的方法： this.$emit("自定义接收名称")

在父组件向子组件 传递方法 的基础上，给方法 增加参数 ，
也就是在子组件中触发父组件的方法时： this.$emit("自定义接收名称"，需传递的数据) ，父组件中的方法也增加参数接收数据即可。

在父组件中使用子组件时，增加 ref属性并指定ref的名称 ，然后在调用方法的地方使用 this.refs.ref的名称.需调用的子组件方法名() 即可调用。
e.g.