angular7中非父子组件间的通讯

方式一：通过service

1. 传递数据的组件：
   header.component.ts

   constructor(private headerHomeData: HeaderHomeDataService
   ) { }// 每次更改下拉框将数据传递给服务
   selectModeChange(e: any) {this.selectIsOpen = false;this.headerHomeData.fertilizerSiteID = e;
   }// 根据用户权限获取列表数据
   getUserAuthAreaFertSiteList() {const params = `UserGuid=446c46c2-7482-431f-91b3-ed069a6dc63d`;this.http.doPost(this.api.getUserAreaFertSiteList, params).subscribe((data: any) => {console.log(data);if (data.IsSucceed) {this.userAuthAreaFertSiteList = data.Data;if (data.Data.length > 0) {this.selectedValue = data.Data[0].ID;// 将第一条数据的ID传递给服务this.headerHomeData.fertilizerSiteID = data.Data[0].ID;}}});
   }
   

2. 服务
   header-home-service.ts

   import { Injectable } from '@angular/core';@Injectable({providedIn: 'root'
   })
   export class HeaderHomeDataService {public fertilizerSiteID: any = 0;constructor() { }
   }
   

3. 接收数据的组件
   home.component.ts

   constructor(private headerHomeData: HeaderHomeDataService) { }ngDoCheck(): void {console.log(this.headerHomeData.fertilizerSiteID);
   }
   

注意：
以上方式通过doCheck检测，然后在传递方每次更改数据的时候，接收方就可以获得数据的变化，也可以在接收方使用其他的钩子，但是只能监测到第一次的数据。

方式二：借助service通过BehaviorSubject实现

当组件间没有直接的关系的时候，我们可以创建一个共享服务，然后通过Rxjs中的BehaviorSubject来存储数据，这样每个组件通过订阅这个数据，当这个数据发生变化的时候，都可以获得最新的数据。

优点：

• 真正的发布订阅模式，在类似在vue和react中的发布订阅模式或者其中的库
• 不同于上面的模式，还需要检测，发布订阅模式，当数据改变时，订阅者也能得到响应

1. 发布方：
   header.component.ts

   import { ApiService } from 'src/app/services/api.service';
   import { HttpService } from 'src/app/services/http.service';
   import { HeaderHomeDataService } from 'src/app/services/header-home-data.service';constructor(private router: Router,private api: ApiService,private http: HttpService,private headerHomeData: HeaderHomeDataService
   ) { }// 选择配肥站下拉框改变
   selectModeChange(e: any) {this.selectIsOpen = false;// 将数据通过服务发布给订阅方，每次更改数据，订阅方就会接收到数据this.headerHomeData.changeMessage(e);
   }// 根据用户权限获取列表数据
   getUserAuthAreaFertSiteList() {const params = `UserGuid=446c46c2-7482-431f-91b3-ed069a6dc63d`;this.http.doPost(this.api.getUserAreaFertSiteList, params).subscribe((data: any) => {console.log(data);if (data.IsSucceed) {this.userAuthAreaFertSiteList = data.Data;if (data.Data.length > 0) {this.selectedValue = data.Data[0].ID;// 发布方通过将数据发布出去，下面调用的是服务中的方法this.headerHomeData.changeMessage(data.Data[0].ID);}}});
   }
   

2. 服务
   header-home-data.service.ts

   import { Injectable } from '@angular/core';
   import { BehaviorSubject } from 'rxjs';@Injectable({providedIn: 'root'
   })
   export class HeaderHomeDataService {// 订阅的属性：用来给订阅方存储数据public currentMessage = new BehaviorSubject(0);constructor() { }// 订阅的方法：用来接收发布方的数据changeMessage(message: number): void {this.currentMessage.next(message);}}
   

3. 订阅方
   home.component.ts

   import { HeaderHomeDataService } from 'src/app/services/header-home-data.service';constructor(private headerHomeData: HeaderHomeDataService
   ) { }ngOnInit() {this.headerHomeData.currentMessage.subscribe(message => {console.log(message);  // 实施接收发布方传递的数据});}
   

其他方式

• 本地存储
• 路由

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！