Angular6經過service進行傳值

應用場景

當一個父組件下的不一樣子組件須要進行傳遞數據時，咱們能夠選擇經過Angular中的service傳值

需使用到的Observable簡介

在RxJS中，Subject是一類特殊的Observable，它能夠向多個Observer多路推送數值。普通的Observable並不具有多路推送的能力（每個Observer都有本身獨立的執行環境），而Subject能夠共享一個執行環境。BehaviorSubject是Subject的一個衍生類，它將數據流中的最新值推送給接受者

• 在服務中使用訂閱來向各個組件推進數據；
• 在父組件的模板中綁定屬性，父子組件中的構造函數同時使用服務參數；
• 在子組件中調用服務中的推送來推送數據更改，其餘子組件能夠經過ngOnChanges來檢查更改而後作出相應的處理。

實例1

在公共父組件的service中先定義一個BehaviorSubject

$openTabs: BehaviorSubject<Set<ITab>> = new BehaviorSubject<Set<ITab>>(new Set());[set是Angular中的構造函數]
$openTabIndex: BehaviorSubject<number> = new BehaviorSubject<number>(-1);

// 獲取這個須要在不一樣子組件中共享的值   其中一個子組件A中須要經過subscribe來訂閱這個方法獲取修改後的變量
 getOpenTabs(): Observable<Set<ITab>> {
    return this.$openTabs.asObservable();
  }
 getOpenTabIndex(): Observable<number> {
    return this.$openTabIndex.asObservable();
  }
  
//另外一個子組件B經過調用此方法來修改公用的變量並經過next的方式進行通知，好比工具欄上的刪除按鈕的調用
 openTab(tab: ITab): void {
    const openTabsValue = this.$openTabs.getValue();
    const openTabs = Array.from(openTabsValue);
    const index = openTabs.findIndex((value: ITab) => value.name === tab.name);
    if (index === -1) {
      openTabsValue.add(tab);
      this.$openTabs.next(openTabsValue);
      this.$openTabIndex.next(openTabsValue.size);
    }
  }
複製代碼

子組件A中的調用代碼
constructor(private _commonService: TestService) {
    _commonService.getOpenTabIndex().subscribe((res) => {
      if (res) {
        //得知變量變化後，須要執行的邏輯
      }
    })
  }
複製代碼

子組件B中的調用代碼
<span (click)="commonService.openTab()"></span>
複製代碼

實例2（另外一種相似的方式）

在公共父組件的service中先定義一個Subject
$addData: Subject<any> = new Subject(); 經過$addData去next相關的值

子組件A中的調用代碼，來獲取變化後的數據
constructor(private _commonService: TestService) {
    _commonService.$addData.subscribe((res) => {
      if (res) {
        //得知變量變化後，須要執行的邏輯
      }
    })
  }
 
子組件B經過調用此方法來修改公用的變量並經過next的方式進行通知 
this._xxService.$addData.next(medicalData)
複製代碼

總結

實例1中的方式，是保證只能在service中更改數據，而後組件只能經過訂閱來獲取結果，asObservable()就是保證數據只能在service中進行更改

實例2中的方式，是讓變量能夠在組件中進行更改，可是對於代碼的維護性和統一性更建議使用實例一中的方式

不只是service能夠經過subject進行傳值，也能夠在組件中使用subject進行next(),在另一個組件中經過subscribe進行獲取