Rxjs 可观察问题

Question

我已经声明了一个正在使用的主题，并尝试通过使用“subject.next()”向后端发出 GET 调用来推送响应。还使用“subject.asObservable()”为该主题分配了一个可观察的对象并订阅了两个不同组件（父组件和路由器出口子组件）中的可观察对象。 问题是 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);
     }
     );   
 }

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

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

与以下

subject = new BehaviorSubject({});

希望这可以帮助...