Angular 组件通讯父子组件通讯和中间人模式(通过服务通讯)

2020-6-17 Jon angular

angular 是组件化的框架,通过一个个组件来构成整个项目,所以组件之间的通讯是必不可少的,下面就分别说下父子组件通讯和中间人模式通讯的使用。

组件通讯之父子组件之间通讯
// parent.component.html
<h1>父组件</h1>
<app-child [value]="value" (valueEvent)="onValueEvent($event)"></app-child>
// parent.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit {
  value: string = '父组件传给子组件值123';
  constructor() {}
  ngOnInit() {}
  // 监听到子组件传来的值
  onValueEvent(value) {
    console.log(value);
  }
}
// child.component.html
<h1>子组件</h1>
<div>父组件传过来的值:{{ value }}</div>
<button (click)="sendValueToParent()">点击发送值给父组件</button>
// child.component.ts
import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
  @Input() value: string;
  @Output() valueEvent = new EventEmitter;
  constructor() { }
  ngOnInit() {}
  // 发送值给父组件
  sendValueToParent() {
    this.valueEvent.emit('传给父组件的值');
  }
}
组件通讯之中间人通讯

两个组件 A、B 之间需要通讯,但是不是父子组件,如果一层层传递会比较繁琐并难以维护。这时候就需要用到中间人通讯方式,即使用服务作为中间人在两个组件中传递消息,下面以一个鼠标经过移出的案例来介绍下中间人通讯的用法。

  1. 选择或者定义一个合适的服务并添加以下代码
// 鼠标经过及移出事件
hoverItemEvent:EventEmitter<any> = new EventEmitter();
  1. A 组件充当消息传递的传递方
<div (mouseenter)="hoverItem(true)" (mouseleave)="hoverItem(false)">鼠标事件</div>
import { DefaultService } from './services/default.service';
constructor(
  private defaultService: DefaultService
) { }
hoverItem(event) {
  this.defaultService.hoverItemEvent.emit(event);
}
  1. B 组件充当消息传递的接收方
import { DefaultService } from './services/default.service';
constructor(
  private defaultService: DefaultService
) { }
earthSubscribe: Subscription;
ngOnInit(): void {
	// 订阅productService中发布的事件searchEvent
	this.earthSubscribe = this.defaultService.hoverItemEvent.subscribe((val) => {
	  // 订阅到服务发布的事件后调用服务的search函数
	  console.log(val)
	  if(val) {
	    this.clearEarthTimer();
	  }else {
	    this.resetRotation(this.cesiumCamera)
	  }
	})
}
// 销毁时
ngOnDestroy() {
  this.earthSubscribe.unsubscribe();
}

还有一种组件通讯的方式是通过状态管理,angular中的状态管理插件是ngrx,因为ngrx内容较多,所以这篇博客不展开,后面单独用一篇博客来讲解用法。

备注:定义一个Observable流变量
products$: Observable<Product[]>;
this.products$ = this.selectedTabLink$.pipe(
switchMap(tab => this.service.getProductsByTab(tab))
);

 

标签: angular 组件 组件通讯 父子组件 服务 中间人

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

评论:

sgeb
2020-11-12 10:02
空包单号网全国地址任意发,24小时自助下单,快速免费提供底单www.dydanhw.com

发表评论:

皖ICP备15010162号-1 ©2015-2020 知向前端
qq:1614245331 邮箱:13515678147@163.com Powered by emlog sitemap