Angular|Angular 用service 在组件间传递数据

0,把service中的数据传给组件:


Angular|Angular 用service 在组件间传递数据
文章图片
Angular|Angular 用service 在组件间传递数据
文章图片
1, 创建Service.ts file
--所有需要维护的数据
--一个数据对应一个EventEmitter
--对数据的set,get或其他操作


Angular|Angular 用service 在组件间传递数据
文章图片
2,创建trigger component 该文件用于关联html和ts中的emit,html中绑定了onSetToActive方法,在onSetToActive方法中调用service中的event。


Angular|Angular 用service 在组件间传递数据
文章图片
Angular|Angular 用service 在组件间传递数据
文章图片
3,trigger事件被创建, 接下来创建listen方法监听。


Angular|Angular 用service 在组件间传递数据
文章图片
用对应EventEmitter的subscribe方法监听,在subscribe方法中写监听到后,具体对service数据的操作,一般这个操作是写在service.ts中。


备注:
有关service的dependecy inject
1,创建service
2,引入module(import),引入provider,在construc中引入(别忘加private)
3,引入module(import),在construc中需要每用到一次都引入,但providers只要在最顶层引入即可(子组件都可以用)
【Angular|Angular 用service 在组件间传递数据】

Angular|Angular 用service 在组件间传递数据
文章图片
Angular|Angular 用service 在组件间传递数据
文章图片

    推荐阅读