Angular 非父子组件间的service数据通信

完成思路：以service.ts（主题subject---订阅sbuscribe模式）为数据中转中间件，通过sku.ts的数据更改监测机制，同步更改service.ts中的数据，同时buy.ts组件实时接收service.ts的变化后的数据完成数据共享传递。

1、定义service.ts共享数据中转ts文件

import {Injectable} from '@angular/core';
import { Subject } from "rxjs/Subject";

export class Sku{
    skuInfo:{}
}
@Injectable()

export class TongxinProvider {
   public skuList:Sku = {
        skuInfo:{}
    };
    constructor(
    ) {
        console.log('Hello TongxinProvider Provider');
    }
//实例化主题Subject类对象
    private Source=new Subject<any>();
    public Status$=this.Source.asObservable();
// 定义数据传递函数
// 商品详情页商品规格选择与购买组件交互
    public skuBuy(data){
        this.skuList.skuInfo = data;
        this.Source.next(this.skuList.skuInfo);
    }

}

 

　　

2、商品规格列表sku.ts组件向外部其他组件发送当前选中的商品规格信息

 1 import {Component, Input, OnChanges} from '@angular/core';
 2 import {TongxinProvider} from "../../providers/tongxin";
 3 import {ValidateProvider} from "../../providers/validate";
 4 import {PopProvider} from "../../providers/pop";
 5 
 6 @Component({
 7     selector: 'good-sku',
 8     templateUrl: 'good-sku.html'
 9 })
10 export class GoodSkuComponent implements OnChanges {
11     // angular @Input接受父组件传递的商品规格数据
12     @Input() skuInfo: object = {};
13     public colorSku:number = 0;
14     public sizeSku:number = 0;
15     public goodNum:number = 0;
16     constructor(public TongXin: TongxinProvider,
17                 public Validate: ValidateProvider,
18                 public Pop:PopProvider) {
19         console.log('Hello GoodSkuComponent Component');
　　　　　// 当组件数据不是有父级组件的可输入属性导入而是当前组件的静态数据时，需先在construcor函数里首先调用下，手动向buy.ts导入初始化数据，服务才能正常起作用。如：
        this.changeSku();
    
20     }
21     // 在ngOnChanges中初始化调用导入商品规格数据到service.ts服务中去
22     ngOnChange方法会在this.skuInfo数据发生改变是自动调用执行
23     ngOnChanges(){
24         this.goodNum = this.skuInfo['stock'];
25         this.changeSku();
26     }
27     // 更改发布商品规格信息
28     public changeSku() {
29         this.TongXin.skuBuy(this.skuInfo);
30     }
31     //商品规格一切换
32     public setColorSku(index) {
33         this.colorSku = index;
34     }
35     // 商品规格二切换
36     public setSizeSku(index) {
37         this.sizeSku = index;
38     }
39     // 增加商品数量
40     public addGood(){
41         console.log(this.goodNum)
42         if(this.skuInfo['num'] >= this.goodNum){
43             this.Pop.toast("不能再多了！");
44             return false;
45         }
46         this.skuInfo['num'] ++;
47         this.skuInfo['stock'] --;
48     }
49     // 减少商品数量
50     public descGood(){
51         if(this.skuInfo['num'] <= 1){
52             this.Pop.toast("不能再少了！");
53             return false;
54         }
55         this.skuInfo['num'] --;
56         this.skuInfo['stock'] ++;
57     }
58 }    

 

 

3、buy.ts组件接收sku.ts组件发送的规格信息

import {Component, Input, OnInit, Output} from '@angular/core';
import { PopProvider } from "../../providers/pop";
import {serviceProvider} from "../../providers/service";

@Component({
    selector: 'share-header',
    templateUrl: 'share-header.html'
})
export class ShareHeaderComponent implements OnInit{

    @Input() buy: string = '';
    
    //声明事件发射器
    @Output() checkEmitter = new EventEmitter<boolean>();
    private isLogin:boolean = false;
    public goodSku:Object = {};
    constructor(public Pop:PopProvider,
                public navCtrl:NavController,
                public navParams:NavParams,
                public service:serviceProvider) {
        console.log('Hello ShareHeaderComponent Component');
    }
    // 在ngOnInit（组件初始化完成以后）接收sku.ts组件发送的数据并保存到this.goodSku属性中，便于buyGood方法中调用商品规格数据
    ngOnInit(): void {
        this.getSkuInfo();
    }
    public getSkuInfo(){
       this.service.Status$.subscribe(res=>{
             // 至此完成了由sku.ts组件到buy.ts组件的数据共享传递流程
            this.goodSku  = res;
        })
    }

    // 点击购买商品
    public buyGood(id) {

        console.log(this.goodSku)

    }
}