方式一:通过service
-
传递数据的组件:
header.component.tsconstructor( 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; } } }); }
-
服务
header-home-service.tsimport { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class HeaderHomeDataService { public fertilizerSiteID: any = 0; constructor() { } }
-
接收数据的组件
home.component.tsconstructor( private headerHomeData: HeaderHomeDataService ) { } ngDoCheck(): void { console.log(this.headerHomeData.fertilizerSiteID); }
注意:
以上方式通过doCheck检测,然后在传递方每次更改数据的时候,接收方就可以获得数据的变化,也可以在接收方使用其他的钩子,但是只能监测到第一次的数据。
方式二:借助service通过BehaviorSubject实现
当组件间没有直接的关系的时候,我们可以创建一个共享服务,然后通过Rxjs中的BehaviorSubject来存储数据,这样每个组件通过订阅这个数据,当这个数据发生变化的时候,都可以获得最新的数据。
优点:
- 真正的发布订阅模式,在类似在vue和react中的发布订阅模式或者其中的库
- 不同于上面的模式,还需要检测,发布订阅模式,当数据改变时,订阅者也能得到响应
-
发布方:
header.component.tsimport { 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); } } }); }
-
服务
header-home-data.service.tsimport { 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); } }
-
订阅方
home.component.tsimport { HeaderHomeDataService } from 'src/app/services/header-home-data.service'; constructor( private headerHomeData: HeaderHomeDataService ) { } ngOnInit() { this.headerHomeData.currentMessage.subscribe(message => { console.log(message); // 实施接收发布方传递的数据 }); }
其他方式
- 本地存储
- 路由