Когда я подписываюсь на тему, невозможно получить значение в angular 8

Question

У меня есть 1-й компонент, я отправляю данные в Сервис, а в Сервисе я использую Subject для передачи данных. Во 2-ом Компоненте я подписался на тему. Но я не могу получить данные во втором компоненте, на который я подписан.

компонент Один

editUser(user){
   this.dashboardService.editUser(user);
   this.router.navigate(['/form']);
} 

Service.ts

import { Subject } from 'rxjs';
mySubject= new Subject<any>();
formData = this.mySubject.asObservable();

editUser(user){
   this.mySubject.next(user);
}

компонент два

ngOnInit(){
   this.dashboardService.formData.subscribe(userData =>{
        console.log(userData);
   })
}

Answer 1

Изменение маршрута создает впечатление, что вы подписываетесь после отправки данных субъекту. Субъект будет выдавать только текущим подписчикам и не будет содержать значение. Если это так, используйте взамен BehaviourSubject или ReplaySubject.

Answer 2

вы должны создать переменную, подобную этой

mySubject= new Subject<any>();

, после этого в компоненте вы должны вызвать edituser() метод с сервисом

 editUser(data: any){
    this.mySubject.next(data);
 }

и получить подробную информацию о редакторе нужно позвонить geteditUser() по номеру constructor() или ngOnInit()

geteditUser(): Observable<any> {
    return this.mySubject.asObservable();
}

, после этого вам нужно позвонить вот так

Например

this.yourservicename.geteditUser().subscribe(res=>{
  console.log('res ==> ', res); // your response
});

Answer 3

Вместо того, чтобы вообще использовать formData, просто замените его на приведенный ниже код, и все будет в порядке.

Я сделал короткую демонстрацию с использованием вашего кода и только что использовал один компонент, например. :)

https://stackblitz.com/edit/angular-etcned?file=src%2Fapp%2Fhello.component.ts

ngOnInit(){
      this.dashboardService.mySubject.subscribe(userData =>{
               alert(userData);
        })
    }

Answer 4

рабочая демонстрация в этой ссылке на StackBlitz

РЕДАКТИРОВАТЬ

---

Тема не имеет последнее значение для подписчиков. таким образом, при изменении маршрута он не будет получать значения от предыдущего компонента. Здесь нужно два способа ..

1. Использовать BehaviorSubject вместо subject.
2. Использовать одну ссылочную переменную. используйте оператор startWith() rx js.

Я собираюсь перейти ко второму подходу, поскольку вы уже используете Subject. отредактированный код доступен ниже ...

Просто используйте async pipe, во втором компоненте. Потому что async-pipe обрабатывает подписку и отписку от части наблюдаемой темы, и нам больше не нужно об этом думать.

component.one. html

<h4> Component : 1 </h4>
<button (click)="sendData()">sendData </button>
<hr>

component.one.ts

export class ComponentOneComponent  {
   mySubject = this.communicateService.getSubjectObservable();
   constructor(private communicateService: CommunicateService) { }
   sendData(){
      this.communicateService.editUser({name: 'wesbos'});
      this.router.navigate(['/form']);
   } 
}

component.two. html

<h4> Component : 2 </h4>

<div *ngIf="data | async as user">
  {{user | json}}
</div>

Выше мы используем async-pipe для автоматической подписки данных ..

component.two.ts

export class ComponentTwoComponent {
   data = this.communicationService.getSubjectObservable();
   constructor(private communicationService: CommunicateService) { }
}

communication-service.ts

export class CommunicateService {
  latestData = {};

  mySubject: Subject<any> = new Subject<any>();
  formData = this.mySubject.asObservable();

  editUser(user){
     this.latestData = {...user};
     this.mySubject.next(user);
  }
  getSubjectObservable(){
     return this.formData.pipe(startWith(this.latestData));
  }
}

Answer 5

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

userDataStatusChange: Subject<any> = new Subject<any>();

editUser(user){
      this.userDataStatusChange.next(user);
    }

И в компоненте 2

ngOnInit(){
     this.dashboardService.userDataStatusChange.subscribe((userData) =>{
               console.log(userData);
        })
    }