DeathGhost

Angular 父组件与子组件通讯之共享服务

这篇文章发布于 2019年06月28日 22:32 星期五 阅读 422 次,评论 0 条

DeathGhost 编辑,归类于angular »

父组件和它的子组件共享同一个服务,利用该服务在组件家族内部实现双向通讯。该服务实例的作用域被限制在父组件和其子组件内。这个组件子树之外的组件将无法访问该服务或者与它们通讯。

angular有多种组件间传值通讯方法,今天在这里引用官方笔记下通过服务进行父子组件之间的通讯。具体根据项目内容归属对其划分。

前提是在哪个模块使用就在哪里引入,如果是全局性的,直接导入在项目的根模块即可,其下的组件均可访问该服务或通讯。

angular通讯
Angular EventEmitter 服务通讯

使用场景:非同一个模块结构布局中某一路由下的页面在某种情况下需要向外发送命令,让其收到命令进行执行的情况下我们可以在根模块下创建一个服务,让其子组件均可访问。

好比父组件含有导航列表,我们在子组件中管理功能导航保存完毕后通知父组件导航更新一般,发送指定标识,其接收到对其再次请求。

首先在根模块下创建一个服务。

import { Injectable, EventEmitter } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class EventEmitterService {
  public eventEmit =  new EventEmitter();
  constructor() {}
}

第二步在根模块将其导入。(e.g:app.module)

import { EventEmitterService } from './service/event-emitter.service';
...
// 将其共享给子组件
providers: [...srevice]
...

最后子组件通过构造函数将其注入进来。

import { EventEmitterService } from './service/event-emitter.service';
...
constructor(private emitService: EventEmitterService){}
...

使用方法:

发送:

// 例如
this.emitService.eventEmit.emit({isClosed: true, params: 0});

接收:

import { Subscription } from 'rxjs';
...
getVal = '';
subscription: Subscription;
...📥
this.subscription = this.emitS.eventEmit.subscribe(data => {
  if (data['isClosed']) {
   this.getVal = data['params'];
  }
});

另外,自己订阅在组件被销毁时需要调用unsubscribe()退订,防止内存泄漏。不然你会看到意想不到的效果,即使您导航到另一个组件视图里,也会一直有效,直到取消订阅为止。

所以,还需要再接收一方的组件ngOnDestroy钩子里执行退订

// 📤 退订
this.subscription.unsubscribe();

如同 上篇文章"Angular 路由快照"场景下,如果使用到此方法通讯,不退订就会出现这种情况。具体细节根据实际项目而定,仅供阅读参考。

用户评论(当前评论共计0条)

⚠️ 评论内容需要审核方可显示。
DeathGhost

孙志锋

视觉前端爱好者

志于道,据于德,依于仁,游于艺。


孙志锋more,08年毕业于外事EC专业,从事5年服装B2C运营管理于杭;现,西安从事IT领域前端设计开发工作。
4

目录

32

文章

11

评论

🙏 到访,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕