Angular 使用服務在組件之間共享數據

Question

我正在嘗試使用服務在組件之間共享數據。 在project組件中，按鈕上有一個單擊事件

<button type="submit" (click)="newValue()" class="btn btn-warning btn-sm mt-2">Create task</button>

它應該發出一個字符串值

newValue() {
    this.shareService.changeValues("Hello from project");
  }

在服務中，我試圖在BehaviorSubject上獲得一個observable

 private selectedValue = new BehaviorSubject<string>("");

  currentValue = this.selectedValue.asObservable();

Task組件已訂閱，但值未更新。

閃電戰

Answer 1

在服務中，當調用changeValues方法時，您需要對BehaviorSubject即BehaviorSubject執行.next 。 請參考下面的代碼

在ShareService

changeValues(value: string) {
    this.selectedValue.next(value);
}

更好的處理方法是返回Observable ，我們可以訂閱它來獲取值。

@Injectable()
export class ShareService{
   selectedValue = new BehaviorSubject<string>("");

   getSelectedValue$() {
      return this.selectedValue.asObservable();
   }
   changeValues(value: string) {
        this.selectedValue.next(value);
    }
}

無論我們在哪里需要SelectedValue ，我們都會注入這個Service並subscribe從getSelectedValue$方法返回的Observable 。 在Task組件中

export class TaskComponent implements OnInit {
   constructor(
       public ShareService: ShareService) {
   }
   ngOnInit(): void {
    this.ShareService.getSelectedValue$().subscribe((selectedValue)=> {
        // use selectedValue here
    })
  }
}