在不同的组件中订阅英雄之旅的搜索栏结果

Question

我是 Angular 4 的新手（我以前有过 AngularJS 的经验），我正试图围绕 Observables 思考。

我正在关注教程的 Tour of Heroe's HTTP 部分，他们将引导您完成创建搜索栏的过程。

我已成功完成此操作，并通过服务中的模拟 http.get 将结果填充到我的搜索栏下拉列表中的 mat-autocomplete（不是我自己添加这部分的教程中）。

为了看看我是否理解 observable，我创建了一个名为 sidenav.component.ts 的组件，它是 的子组件app.component.html 模板。

sidenav.component.html 只是来自 Material Sidenav Example

我正在尝试在 sidenav.component.html 组件的 div 中放置一个简单的 for 循环，看看我是否可以通过管道传输该搜索的输出进入不同的组件模板。

<div *ngFor="let hero of heros | async"></div>

我已将 HeroSearchService 注册为 app.module.ts 级别

我正在将该服务注入我的 sidenav.component.ts，如下所示

constructor( private heroSearchService: HeroSearchService) {}

但这就是我感到困惑的地方......我的问题是这个。

如果我想注册到搜索栏下方填充我的 mat-autocomplete 的数据，我会订阅 search() 方法吗？ ]HeroSearchService?

所以你不用去复习教程中的代码服务代码如下。（我做了一个小改动，我将 term 设置为 NULL 使其成为可选的）

import { Injectable } from '@angular/core';
import { Http }       from '@angular/http';

import { Observable }     from 'rxjs/Observable';
import 'rxjs/add/operator/map';

import { Hero }           from './hero';

@Injectable()
export class HeroSearchService {

  constructor(private http: Http) {}

  search(term: string **= null**): Observable<Hero[]> {
    return this.http
               .get(`api/heroes/?name=${term}`)
               .map(response => response.json().data as Hero[]);
  }
}

我在我的 "sidenav" 组件中尝试了以下操作，希望看到我的 mat-autocomplete 的输出也在 console.log 中输出......但它似乎不起作用。

    heroes: Observable<Hero[]>;

    constructor( private heroSearchService: HeroSearchService) {}

      ngOnInit() {
        this.heroes = this.heroSearchService.search()

        this.hospitals.subscribe(
        value => console.log(value)
     ) 
 }

希望有人能帮助我了解如何使用 HeroSearchService 中的 search() 方法的输出更新两个组件。

Answer 1

不，你不明白它是如何工作的。

每次您在搜索栏中键入内容时，自动完成功能都会调用您的搜索服务并将键入的值作为参数，获取服务返回的新 Observable，并订阅这个 observable 用于显示建议。

你在你的组件中所做的只是在你的组件初始化时调用服务，没有任何参数（这没有什么意义：你要求所有的建议甚至没有搜索词），从而获得一个 Observable，不同于当您在其中输入内容时返回到搜索栏的所有 observable，并显示针对缺少搜索词返回的建议。

要实现您想要实现的目标（即在每次输入一些文本后显示搜索栏获得的建议），您需要在您的服务中公开一个 observable，它会发出所有搜索结果返回到搜索栏。类似的东西：

export class HeroSearchService {

  searchResults = new Subject<Hero[]>();

  constructor(private http: Http) {}

  search(term: string **= null**): Observable<Hero[]> {
    return this.http
               .get(`api/heroes/?name=${term}`)
               .map(response => response.json().data as Hero[])
               .do(heroes => this.searchResults.next(heroes));
  }
}

所以，为了解释，您将窃听搜索栏和服务之间的通信，并发出所有返回到搜索栏的搜索结果。

要显示与搜索栏相同的结果，您需要订阅 searchResults observable 并显示它发出的搜索结果。

在不同的组件中订阅英雄之旅的搜索栏结果

Subscribe to Tour of Hero's Search bar results in different component

typescript

angular2-services