Angular6通过service进行传值

最新推荐文章于 2024-02-22 00:35:34 发布

转载最新推荐文章于 2024-02-22 00:35:34 发布 · 3.7k 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c3fdfa1f265da61477076cf

文章标签：

#javascript #后端 #ViewUI

这篇博客探讨了在Angular6中如何通过Service进行组件间的传值，主要介绍了两种方式：一是使用BehaviorSubject确保数据只能在Service中更改并订阅获取；二是允许组件直接更改Service中的变量，但推荐使用第一种以保持代码的维护性和统一性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

应用场景

当一个父组件下的不同子组件需要进行传递数据时，我们可以选择通过Angular中的service传值

需使用到的Observable简介

在RxJS中，Subject是一类特殊的Observable，它可以向多个Observer多路推送数值。普通的Observable并不具备多路推送的能力（每一个Observer都有自己独立的执行环境），而Subject可以共享一个执行环境。BehaviorSubject是Subject的一个衍生类，它将数据流中的最新值推送给接受者

在服务中使用订阅来向各个组件推动数据；
在父组件的模板中绑定属性，父子组件中的构造函数同时使用服务参数；
在子组件中调用服务中的推送来推送数据更改，其他子组件可以通过ngOnChanges来检查更改然后做出相应的处理。

实例1

在公共父组件的service中先定义一个BehaviorSubject

$openTabs: BehaviorSubject<Set<ITab>> = new BehaviorSubject<Set<ITab>>(new Set());[set是Angular中的构造函数]
$openTabIndex: BehaviorSubject<number> = new BehaviorSubject<number>(-1);

// 获取这个需要在不同子组件中共享的值   其中一个子组件A中需要通过subscribe来订阅这个方法获取修改后的变量
 getOpenTabs(): Observable<Set<ITab>> {
    return this.$openTabs.asObservable();
  }
 getOpenTabIndex(): Observable<number> {
    return this.$openTabIndex.asObservable();
  }
  
//另一个子组件B通过调用此方法来修改公用的变量并通过next的方式进行通知，比如工具栏上的删除按钮的调用
 openTab(tab: ITab): void {
    const openTabsValue = this.$openTabs.getValue();
    const openTabs = Array.from(openTabsValue);
    const index = openTabs.findIndex((value: ITab) => value.name === tab.name);
    if (index === -1) {
      openTabsValue.add(tab);
      this.$openTabs.next(openTabsValue);
      this.$openTabIndex.next(openTabsValue.size);
    }
  }
复制代码

子组件A中的调用代码
constructor(private _commonService: TestService) {
    _commonService.getOpenTabIndex().subscribe((res) => {
      if (res) {
        //得知变量变化后，需要执行的逻辑
      }
    })
  }
复制代码

子组件B中的调用代码
<span (click)="commonService.openTab()"></span>
复制代码

实例2（另一种类似的方式）

在公共父组件的service中先定义一个Subject
$addData: Subject<any> = new Subject(); 通过$addData去next相关的值

子组件A中的调用代码，来获取变化后的数据
constructor(private _commonService: TestService) {
    _commonService.$addData.subscribe((res) => {
      if (res) {
        //得知变量变化后，需要执行的逻辑
      }
    })
  }
 
子组件B通过调用此方法来修改公用的变量并通过next的方式进行通知 
this._xxService.$addData.next(medicalData)
复制代码