Question

我有1stcomponent，我正在向Service发送数据，在Service中，我正在使用Subject发出数据。在2ndComponent中，我订阅了主题。但是我无法获取第二部分中的数据已订阅。

组件一

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

尝试像这样更新它

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

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

在组件2中

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

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 Link

中的

工作演示

编辑

主题未向订阅者发出最新值。因此，当更改路线时，它将无法从先前的组件中获得价值。这里需要两种方法。

使用BehaviorSubject代替subject。
使用一个参考变量。使用startWith() rxjs运算符。

由于您已经使用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

您必须制作一个这样的变量

mySubject= new Subject<any>();

在此之后，您必须使用服务调用edituser()方法

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

要获取edituser的详细信息，您需要在geteditUser()或constructor()下调用ngOnInit()

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

之后，您需要像这样呼叫

例如

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

当我订阅主题时，无法获取角度8中的值

5 个答案:

编辑