angular7中非父子组件间的通讯

川长思鸟来 2024-04-17 18:06 68阅读 0赞

#### 方式一：通过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);  // 实施接收发布方传递的数据
             });
         }

#### 其他方式 ####

*  本地存储
 *  路由