angular 兄弟组件通信

最新推荐文章于 2023-03-02 16:07:32 发布

xggllc

最新推荐文章于 2023-03-02 16:07:32 发布

阅读量958

点赞数

分类专栏： Angular JS相关文章标签： javascript typescript

本文链接：https://blog.csdn.net/xggllc/article/details/118027563

版权

JS相关同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

Angular

6 篇文章 0 订阅

订阅专栏

本文介绍了一种通过Service中的Subject实现Angular应用内兄弟组件间通信的方法。具体步骤包括：定义Subject实例，使用debounceTime操作符防抖处理重复事件，以及在组件中订阅和取消订阅Subject。

摘要由CSDN通过智能技术生成

兄弟组件间通信，在service 中定义 Subject，组件ngOnInit() 初始化监听；

1 service.ts 文件

import { Subject } from 'rxjs';

subjectChartResize = new Subject<string>();

2 监听组件中 component.ts

  import { Subscription } from 'rxjs';
  import { TestService } from './../../test.service';

  subMsgResize: Subscription;

  constructor(private testService: TestService) {}

  ngOnInit() {
    this.subMsgResize = this.testService.subjectChartResize.pipe(debounceTime(500)).subscribe(() => {
      this.chartResize();
    });
    
    // pipe(debounceTime(500)) 延迟500毫秒
    // 也可以写成
    //this.subMsgResize = this.testService.subjectChartResize.subscribe(() => {
    //  this.chartResize();
    //});
  }

  // 重绘图表
  chartResize() {
    this.chart.resize();
  }

  // 取消监听
  ngOnDestroy(): void {
    this.subMsgResize.unsubscribe();
  }

3 另一个组件中发送消息

  import { TestService } from './../../test.service';

  constructor(
    private testService: TestService,
  ) {}

  // 触发通信
  resize() {
   this.testService.subjectChartResize.next();
  }