如何使用 BehaviorSubject（角度）在具有共享服務的兩個不相關組件之間傳遞數組

Question

我一直在努力將數組從一個組件傳遞到另一個組件。 問題是當數組在組件之間傳遞時它是空的。 我可以在控制台中看到該數組填充了整數，但在將任何值推入其中之前它正在傳遞。 我嘗試了多種方法，經過廣泛的研究發現，最好的方法是使用BehaviorSubject ，如該線程中所述： Angular 4 pass data between 2 not related components

唯一的問題是，在示例中，他們傳遞了一個字符串。 我一直在嘗試找到另一個像上面提到的那樣的好例子，但不是傳遞字符串，而是需要一個 integer 數組。 service.ts是compA和compB之間的共享服務。 compA是需要從compB接收數組的組件。 compB是具有需要傳遞給compA的數組的組件。 話雖如此，哪個組件需要訂閱BehaviorSubject ？ 下面給出了我的代碼的簡化版本，注釋行是我迄今為止提出的用數組實現BehaviorSubject的內容。

共享服務 - service.ts

    import { Injectable } from '@angular/core';
    import { HttpClient, HttpParams } from '@angular/http';
    import { BehaviorSubject } from 'rxjs/BehaviorSubject';
    import { RootService } from '../../../common/root-service/root.service';


   @Injectable()
    export class service {
    
    //dataSource: BehaviorSubject<Array<number>> = new BehaviorSubject([]);
    //dataPlot = this.userDataSource.asObservable();


    dataPlot: Array<number> = [];

    

    constructor(private http: HttpClient, private appRootService: RootService) { }
    
    ... Some Code ...
    
    /**
    updateDataPlot(data) {
        this.dataSource.next(data);
    }
    */

    setDataPlot(data: Array<number>) {
        this.dataPlot = data; 
    }

    getDataPlot(): Array<number> {
         return this.dataPlot;
    }
}

組件A - compA.ts

import { Component, HostListener } from '@angular/core';
import { service } from '../../..common/service';
 
... Some Code...

@Component({
    selector: 'compA',
    styleUrls: ['./compA.css'],
    templateUrl: './compA.html'
})

export class compA {

... Some Code ...

dataPlotArray: Array<number>;

constructor(private sw: Service){
     this.getDataPlot();
}

... Some Code ...


getDataPlot() {
     this.dataPlotArray = this.sw.getDataPlot()
}

... Rest of Code ...

組件B - compB.ts

import { Component, HostListener } from '@angular/core';
import { service } from '../../..common/service';
 
... Some Code...

@Component({
    selector: 'compB',
    styleUrls: ['./compB.css'],
    templateUrl: './compB.html'
})

export class compB {

... Some Code ...

dataPlot: Array<number> = [];

constructor(private sw: Service){
     this.setDataPlot();
}

... Some Code ...

/**
setDataPlot() {
   this.sw.setDataPlot.subscribe((this.dataPlot) => { 
     this.sw.updateDataPlot(this.dataPlot);
  })
}
*/

setDataPlot() {
     this.sw.setDataPlot(this.dataPlot);
}

... Rest of Code ...

Answer 1

我們可以擺脫一些錯誤和額外的代碼。

起初，以大寫字母開頭 class 名稱是一個很好的做法。 其次，您不需要像getDataPlot()這樣的方法。 改用Observable 。

您的服務：

...
@Injectable()
export class Service {
    
    dataSource$$: BehaviorSubject<Array<number>> = new BehaviorSubject([]);
    dataPlot$ = this.dataSource$$.asObservable();

    constructor(private http: HttpClient, private appRootService: RootService) { }
    
    ... Some Code ...
    
   
    updateDataPlot(data) {
        this.dataSource$$.next(data);
    }

}

組分 A：

...

@Component({
    selector: 'compA',
    styleUrls: ['./compA.css'],
    templateUrl: './compA.html'
})

export class CompA {

  ... Some Code ...

  dataPlotArray: Array<number>;

  constructor(private sw: Service){
    this.sw.dataPlot$.subscribe( data=> this.dataPlotArray = data);
  }

... Rest of Code ...
}

B組份：

...

@Component({
    selector: 'compB',
    styleUrls: ['./compB.css'],
    templateUrl: './compB.html'
})

export class CompB {

... Some Code ...

  dataPlot: Array<number> = [];

  constructor(private sw: Service){
    //get data here and assign it to dataPlot variable

    this.setDataPlot();
  }

  ... Some Code ...

  setDataPlot() {
     this.sw.setDataPlot(this.dataPlot);
  }

}