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)

    }
}