Question

我创建了一项服务来获取搜索结果。函数名是getSearchResults，用于获取搜索结果，我有一个组件，我订阅了函数'getSearchResults。我还有一个名为'searchResults'的Observable，我订阅它以获得我的组件中的实际结果。当我订阅searchResults变量时，我得到订阅而不是函数错误。有时它工作正常，但当我点击浏览器上的后退按钮时，它会显示错误。

服务：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http';
import { Router } from '@angular/router';

import { AppConfig } from '../app.config';

@Injectable()
export class SearchResultsService {

  // Observable string source
  private searchResultsSource = new BehaviorSubject<any>({"results": "null"});

  // Observable string stream
  searchResults: Observable<any>;

  constructor(
    private router: Router,
    private http: Http,
    private config: AppConfig) {

    this.searchResults = this.searchResultsSource.asObservable();

    }

  getSearchResults(query: string, field: string) {
    if(sessionStorage.getItem('searchResults')) {
      sessionStorage.removeItem('searchResults');
      console.log('removed');
    }

    else console.log('not removed');

    if (field == null || !field)
      field = '_all';

    if (query == null || !query)
      return;

    let token = JSON.parse(localStorage.getItem('authDetails')).accessToken;
    let headers = new Headers({ 'Authorization': token,
      'Access-Control-Allow-Origin': '*'});
    let params: URLSearchParams = new URLSearchParams();
    params.set('q', query);
    params.set('f', field);
    let options = new RequestOptions({ headers: headers,
      search: params
    });
    return this.http.get(this.config.apiUrl+'/search', options)
      .map((response: Response) => {
        console.log('response received');
        this.searchResults = response.json();
        sessionStorage.setItem('searchResults', JSON.stringify(this.searchResults));
        console.log((response.json()).results);
        this.emitSearchResults();
      },
      error => console.log(error));
  }

  emitSearchResults(): void {
    this.searchResultsSource.next(this.searchResults);
  }
}

组件：

import { Component, OnInit, OnDestroy, DoCheck } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/map';

import { SearchResultsService } from '../services/search-results.service';

@Component({
  moduleId: module.id,
  selector: 'app-search-results',
  templateUrl: './search-results.component.html',
  styleUrls: ['./search-results.component.css']
})
export class SearchResultsComponent implements DoCheck, OnInit {

  public searchResults;
  public searchResultsCount: number = 0;
  public subscription;
  public field: string;
  public query: string;

  constructor(
    private searchResultsService: SearchResultsService,
    private router: Router,
    private route: ActivatedRoute) { 

    console.log('on top');

    if(JSON.parse(sessionStorage.getItem('searchResults')))
      this.searchResults = JSON.parse(sessionStorage.getItem('searchResults'));

    this.searchResultsService.searchResults.subscribe(
      (results) => 
        this.searchResults = results);

    this.searchResults = this.searchResultsService.searchResults;

    this.field = this.route.snapshot.params['field'];
    this.query = this.route.snapshot.params['query'];

    console.log('in search results constructor');
    console.log(this.searchResults);
  }

  ngOnInit() {
    this.searchResultsService.getSearchResults(this.query, this.field).subscribe(
      (data) => {
        console.log('subs work');
      },
      (error) => {
        console.log('subs ot work');
      });
  }

  onClick() {
    this.subscription.unsubscribe();
    console.log('destroyed');
  }

  ngDoCheck() {
  }

}

Answer 1

这可能与您定义订阅的方式有关。试试这个

import { Subscription } from 'rxjs/Rx';
...
public subscription: Subscription;
...

然后它应该工作得很好。

我还注意到您正在尝试订阅不存在的方法。您的服务中只有emitSearchResults(): void和getSearchResults。

我还将变量定义为不在构造函数内部但在类似这样的类中的observable

searchResults: Observable<any> = this.searchResultsSource.asObservable();

Answer 2

问题在于我使用相同的变量作为observable以及存储搜索结果。我创建了另一个变量来存储搜索结果，现在错误已修复。

Answer 3

@NitinSingh我没有足够的代表来添加评论，所以我必须在这里回复。

问题在于http.get调用的响应映射。不要this.searchResults = response.json();设置this.searchResults的值。 searchResults正在观察searchResultsSource，因此您可以通过在.map中执行this.searchResultsSource.next(response)来更改观察值。

看起来像这样

return this.http.get(this.config.apiUrl+'/search', options)
      .map((response: Response) => {
        searchResultssource.next(response)
      },
      error => console.log(error));

也不应在构造函数中声明this.searchResults = this.searchResultsSource.asObservable();。

在角度2中订阅不是函数错误

3 个答案: