怎樣才是正確的rxjs寫法? (以切換tab按鈕為情境)

RxJS
1

前情提要：
最近在做tab的切換按鈕
動作效果就是切換tabIndex來切換所在tab

目標：
Aa子元件、B元件、C元件的點選 下一步按鈕
都能夠觸發tab所在頁，並使其換切換至下一個tab

元件階層架構如下

tab所在頁(裡面引入A.B.C元件)
A元件
-Aa子元件
B元件
C元件
TabService

想法歷程：
所以一開始在tab所在頁，完成可以連動tab的按鈕後
想說要跨元件溝通所以就創了個TabService來管理
然後看到observerble感覺這樣寫比較對
開始嘗試 有發生service值有變動但是卻無法讓元件tabIndex變動的狀況
可能是資料傳遞哪邊沒接好或是生命週期哪邊沒寫對

因為時間關係，所以最後變成直接引元件進來

會覺得我沒有正確寫好的原因
是因為跳轉tab的方法我直接用
this.tabPageComponent.tabIndex =
this.tabPageComponent.tabIndex + 1

這樣不就根本沒用到service了嗎也沒用到rxjs了嗎???
因為直接對 tabPage裡面的tabIndex做值的變動

想知道正確的寫法，所以上來請教各位前輩們

tabPage.html

  <mat-tab-group
      mat-stretch-tabs
      dynamicHeight      
      [(selectedIndex)]="tabIndex"        
    >
    <mat-tab label="A"">
      <ng-template mat-tab-label>A</ng-template>
      <app-a-page ></app-a-page>
    </mat-tab>

    <mat-tab label="B" >
      <ng-template mat-tab-label>B</ng-template>
      <app-b-page        
      ></app-b-page>
    </mat-tab>       

    <mat-tab label="C" >
      <ng-template mat-tab-label>C</ng-template>
      <app-c-page></app-c-page>
    </mat-tab>

    </mat-tab>
  </mat-tab-group>

tabPage.ts

  tabIndex = this.tabIndexService.tabSubject.value;
  selectedIndex: number = 0;

  constructor(private tabIndexService: TabIndexService,
  ) {}

 ngOnInit() {
    this.tabIndexService.getTabSelected().subscribe((tabIndex: number) => {
    this.selectedIndex = tabIndex;
    });
  }

tabService.ts

  export class TabIndexService {
  tabIndex = 0;
  tabSubject: BehaviorSubject<number> = new BehaviorSubject<number>(0);
  
constructor() {}
  setTabSelected(tabIndex: number) {
    this.tabSubject.next(tabIndex);
  }

  getTabSelected() {
    return this.tabSubject.asObservable();
  }
}

Aa元件.html、B元件.html、C元件.html

<div >
<button   
mat-raised-button
(click)="setSwitchTabIndexMinus()"
>上一步
</button>

<button
mat-raised-button
(click)="setSwitchTabIndexAdd()"
>
下一步
</button>
</div>

Aa元件.ts、B元件.ts、C元件.ts

/**
   * 跳轉到上一個tab
   */ 
setSwitchTabIndexMinus() {
    return (this.tabPageComponent.tabIndex =
            this.tabPageComponent.tabIndex - 1);
}
      
/**
   * 跳轉到下一個tab
   */ 
setSwitchTabIndexAdd() {
    return (this.tabPageComponent.tabIndex =
            this.tabPageComponent.tabIndex + 1);
}

參考了


和
2

如果你的 service 都已經寫好了 setTabSelected，那為什麼不去呼叫這一個 service 呢? 而是要直接操作 component。

給你一個方向，既然有一個 service 在管理 tabIndex, 那所有的 component 都去跟 service 做溝通就好
但或許你會遇到一個問題，我怎麼取得目前的 tabIndex 呢? 作法有幾種

  1. 你已經使用 BehaviorSubject, 那就直接取就好 ex: tabSubject.value
  2. 使用 scan 來記錄上一次所發生的值 , API
1個讚