Angular 用service 在组件间传递数据

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


Angular 用service 在组件间传递数据_第1张图片
Angular 用service 在组件间传递数据_第2张图片

1, 创建Service.ts file

--所有需要维护的数据

--一个数据对应一个EventEmitter

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


Angular 用service 在组件间传递数据_第3张图片

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


Angular 用service 在组件间传递数据_第4张图片
Angular 用service 在组件间传递数据_第5张图片

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


Angular 用service 在组件间传递数据_第6张图片

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


备注:

有关service的dependecy inject

1,创建service

2,引入module(import),引入provider,在construc中引入(别忘加private)

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


Angular 用service 在组件间传递数据_第7张图片
Angular 用service 在组件间传递数据_第8张图片

你可能感兴趣的:(Angular 用service 在组件间传递数据)