Угловой обмен данными между компонентами, использующими сервис

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");
  }

На службе я пытаюсь получить observable на BehaviorSubject

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

  currentValue = this.selectedValue.asObservable();

Task компонент имеет подписку, но значение не обновляется.

stackblitz

Answer 1

В сервисе вам нужно сделать .next на BehaviorSubject, т.е. BehaviorSubject, когда вызывается метод changeValues. Пожалуйста, используйте код ниже

В 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 в Observable, возвращенный из getSelectedValue$ метода. В Task компонент

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