Question

以下是解决同一问题的两种方法，即对用户在文本框中输入的某些字符进行被动搜索。第一个解决方案来自ngrx example，第二个来自egghead即时搜索课程。

第一个解决方案使用Observable，而第二个解决方案使用Subject。
Observable解决方案使用takeUntil仅调用一次服务器。 Subject解决方案使用distinctUntilChanged。

有人可以解释这两种方法的优缺点吗？

使用Observable进行搜索：

@Injectable()
export class BookEffects {

  @Effect()
  search$: Observable<Action> = this.actions$
    .ofType(book.ActionTypes.SEARCH)
    .debounceTime(300)
    .map(toPayload)
    .switchMap(query => {
      if (query === '') {
        return empty();
      }

      const nextSearch$ = this.actions$.ofType(book.ActionTypes.SEARCH).skip(1);

      return this.googleBooks.searchBooks(query)
        .takeUntil(nextSearch$)
        .map(books => new book.SearchCompleteAction(books))
        .catch(() => of(new book.SearchCompleteAction([])));
    });

    constructor(private actions$: Actions, private googleBooks: GoogleBooksService) { }
}

@Component({
  selector: 'bc-find-book-page',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <bc-book-search [query]="searchQuery$ | async" [searching]="loading$ | async" (search)="search($event)"></bc-book-search>
    <bc-book-preview-list [books]="books$ | async"></bc-book-preview-list>
  `
})
export class FindBookPageComponent {
  searchQuery$: Observable<string>;
  books$: Observable<Book[]>;
  loading$: Observable<boolean>;

  constructor(private store: Store<fromRoot.State>) {
    this.searchQuery$ = store.select(fromRoot.getSearchQuery).take(1);
    this.books$ = store.select(fromRoot.getSearchResults);
    this.loading$ = store.select(fromRoot.getSearchLoading);
  }

  search(query: string) {
    this.store.dispatch(new book.SearchAction(query));
  }
}

使用主题搜索：

import { Component } from '@angular/core';
import { WikipediaSearchService } from './wikipedia-search.service';
import { Subject } from 'rxjs/Subject';

//application wide shared Rx operators
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  items:Array<string>;
  term$ = new Subject<string>();
  constructor(private service:WikipediaSearchService) {

    this.term$
        .debounceTime(400)
        .distinctUntilChanged()
        .switchMap(term => this.service.search(term))
        .subscribe(results => this.items = results);
  }
}

<div>
  <h2>Wikipedia Search</h2>
  <input (input)="term$.next($event.target.value)">
  <ul>
    <li *ngFor="let item of items">{{item}}</li>
  </ul>
</div>

Answer 1

行为主体是一种主体，主体是一种特殊类型的可观察对象，因此您可以像任何其他可观察者一样订阅消息。行为主体的独特特征是：

行为主题需要一个初始值，因为它必须始终返回订阅值，即使它没有收到下一个（）
订阅后，它会返回主题的最后一个值。常规observable仅在收到onnext时触发在任何时候，您都可以使用getValue（）方法在不可观察的代码中检索主题的最后一个值。
与观察者相比，主题的独特特征是：

除了作为一个可观察者之外，它还是一个观察者，因此除了订阅它之外，您还可以向主题发送值。此外，您可以使用行为主题上的asobservable（）方法从行为主体中获取可观察对象。

Observable是Generic，而行为主题在技术上是Observable的子类型，因为行为主体是具有特定品质的可观察物。

可以使用subject.asobservable（）从Regular和Behavior Subject创建一个observable。只有区别在于您无法使用next（）方法将值发送到observable。

在angular2服务中，我会将行为主题用于数据服务，因为角度服务通常在组件和行为主体之前初始化，即使自组件＆＃以来没有新的更新，消费服务的组件也会接收最后更新的数据39;订阅此数据。简而言之，很多东西在observable / subject / BehaviorSubject等中都是相似的，这取决于你的需要。

使用RxJS Observable Vs Subject

1 个答案: