рабочая демонстрация в этой ссылке на StackBlitz
РЕДАКТИРОВАТЬ
Тема не имеет последнее значение для подписчиков. таким образом, при изменении маршрута он не будет получать значения от предыдущего компонента. Здесь нужно два способа ..
- Использовать
BehaviorSubject
вместо subject
. - Использовать одну ссылочную переменную. используйте оператор
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));
}
}