Angular：行为主题值未在服务中持久化

Question

我创建了 2 个组件“search-bar”和“search-results”以及一个共享服务“search-results”。下面是我的代码：（注意）：组件没有父子关系。我只是尝试使用行为主题在组件之间进行通信并用新结果刷新我的ui。

"搜索-results.service":

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class SearchResultsService {

  // Subject to subscribe to
  private results = new BehaviorSubject(null);
  private productsData;

  constructor(private http:HttpClient) { }

  // Http Headers
  httpOptions : Object = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  }

  bodyJson = {};
  RESULTS_API_ENDPOINT = "API_END_POINT_URL";
  
  getResults() {
    this.getAPIResults();
    return this.results.asObservable();
  }

  getAPIResults() {
    this.http.post(this.RESULTS_API_ENDPOINT , this.bodyJson, this.httpOptions).subscribe(res => this.results.next(res));
  }

}

"搜索-results.component.ts"

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { Observable, Subject, throwError } from 'rxjs';
import { SearchResultsService } from '../../services/search-results.service';

@Component({
  selector: 'app-search-results',
  templateUrl: './search-results.component.html',
  styleUrls: ['./search-results.component.css'],
  providers: [SearchResultsService]
})

export class SearchResultsComponent implements OnInit {
  
  public productsData: Object;
  
  constructor(private resultsService: SearchResultsService) {}

  ngOnInit() {
    this.resultsService.getResults().subscribe((res) => (this.productsData = res));
  }

}

<div *ngFor="let product of productsData.products;">
    <h3 class="vs-product-title">
        <a [href]="product.productDetailPage">
            {{product.name}}>
        </a>
    </h3>
</div>

"搜索-bar.component.ts"

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { SearchResultsService } from '../../services/search-results.service';

@Component({
  selector: 'app-search-bar',
  templateUrl: './search-bar.component.html',
  styleUrls: ['./search-bar.component.css'],
  providers: [SearchResultsService]
})

export class SearchBarComponent implements OnInit {

  searchForm: FormGroup;
  searchTerm: string;
  newData: Object = {};

  constructor(private resultsService: SearchResultsService) { }

  ngOnInit(): void {
    this.searchForm = new FormGroup({
      searchField: new FormControl()
    });
    this.resultsService.getResults();
  }

  Submit() {
    this.searchTerm = this.searchForm.value.searchField;
    this.resultsService.bodyJson["query"] = this.searchTerm;
    this.resultsService.getResults();
  }

}

<form class="searchBar vs-col-lg-9" [formGroup] ="searchForm" (ngSubmit)="Submit()">
    <label for="searchField">Search Products</label>
    <input formControlName = "searchField" aria-label = "Search Products" id="search_products" class = "vs-input" type="text" name= "searchProducts" placeholder= "Search placeholder"/>
    <span class="search-icon" (click) = "Submit()"></span>
</form>

当我在检查器中调试时，我看到 API 数据被添加到主题中。但是，我的 html 没有使用搜索结果组件中的产品数据进行更新。请指教。这是我第一次使用 Behavior Subject

Answer 1

"search-bar.component.ts" 文件调用 getAPIResults() 函数而不是 getResults()

"search-results.service" 文件删除此行 this.getAPIResults()

Answer 2

您正在提供提供商：[SearchResultsService]

在两个组件中，当它被注入根时。

从两个组件中删除 providers: [SearchResultsService]。试一试，如果可行请告诉我。

Angular：行为主题值未在服务中持久化

Angular: Behavior Subject Value is not persisting in service

rxjs

behaviorsubject

angular

angular-changedetection

rxjs-observables