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<number>(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);  // 实施接收发布方传递的数据
        });
    }
   

其他方式

• 本地存储
• 路由