Rxjs 可观察到的问题

Question

我已经声明了一个服务中的主题，并尝试通过使用“subject.next()”对后端进行 GET 调用来推送响应。还使用“subject.asObservable()”为该主题分配了一个可观察对象并订阅了两个不同组件（父级和路由器出口子级）中的 observable。问题是 observable 只为一个订阅者而不是为两个订阅者发出新值。

服务

  subject = new Subject<any>();
  observable = this.subject.asObservable();


 public getDetails(id) {
    return this.http.get(this.url.concat(id))
      .pipe(map(data => this.extractDetails(data),
            catchError(err => this.handleError(err)));
  }
 public extractDetails(data){
    this.subject.next(data);
    return data;
  }

父组件

ngOnInIt(){
 this.hitUrl();

}
getDetails(){
    this.service.observable.subscribe(
      (data: any) => {
        console.log(data);
      },
      err => {
        console.error(err);
      }
    )
  }

  hitUrl(id: string) {
    this.service.getDetails(id).subscribe(
      (data: any) => 
        if(!!data){
            console.log(data);
            this.getDetails();
          }
      },
      err => {
        console.log(err);
      }
    );
  }

路由器插座子组件

ngOnInIt(){
 this.hitUrl();

}
getDetails(){
    this.service.observable.subscribe(
      (data: any) => {
        console.log(data);
      },
      err => {
        console.error(err);
      }
    )
  }

  hitUrl(id: string) {
    this.service.getDetails(id).subscribe(
      (data: any) => 
        if(!!data){
            console.log(data);
            this.getDetails();
          }
      },ngOnInIt(){
 this.hitUrl();

}
getDetails(){
    this.service.observable.subscribe(
      (data: any) => {
        console.log(data);
      },
      err => {
        console.error(err);
      }
    )
  }

  hitUrl(id: string) {
    this.service.getDetails(id).subscribe(
      (data: any) => 
        if(!!data){
            console.log(data);
            this.getDetails();
          }
      },
      err => {
        console.log(err);
      }
    );
  }

      err => {
        console.log(err);
      }
    );
  }

在组件中，hitUrl() 也会在执行调用操作时触发，然后我需要 observable 向两个订阅者发出最新数据（如果调用操作是从父级或路由器出口子级执行的）。

Answer 1

我从您的问题中了解到的是，您有两个组件和一个服务，您正在使用服务获取数据，并且希望在调用以下“getDetails()”函数时同时将数据发送到两个组件，而不管从哪里调用这个函数。它可能是调用函数的父级或子级。

 public getDetails(id) {
     return this.http.get(this.url.concat(id))
       .pipe(map(data => this.extractDetails(data),
             catchError(err => this.handleError(err)));   }

在您的代码中，问题在于您正在调用 getDetails 函数的组件代码，而在该函数内部您订阅了 observable，而您应该在 ngOnInit 中订阅 observable。这样当从服务中调用这个 observable.next 时，observable 将在两个组件中执行，因为它将在那里被订阅，请参见下面的代码。

 ngOnInit(){
     this.getDetails();
     this.hitUrl();   }

 getDetails(){
   this.service.observable.subscribe(
     (data: any) => {
       console.log(data);
     },
     err => {
       console.error(err);
     }
   )   
 }

 hitUrl(id: string) {
   this.service.getDetails(id).subscribe(
     (data: any) => 
       if(!!data){
           console.log(data);
         }
     },
     err => {
       console.log(err);
     }
     );   
 }

在上面的代码中，我们首先订阅了主题，然后我们调用了数据。在 service 中的 getDetails(id) 函数中，我们已经发出了主题，并替换了 service 中的以下行。

subject = new Subject<any>();
  observable = this.subject.asObservable();

以下

subject = new BehaviorSubject({});

希望这会有所帮助...