保持监听服务Angular 8的功能答案

【问题标题】：Function to keep listening a service Angular 8保持监听服务Angular 8的功能
【发布时间】：2020-11-11 15:59:35
【问题描述】：

我有两个组件，我将其中一个保持侦听服务中设置的变量的值。一个组件：

    import { Component, OnInit, Input } from '@angular/core';
    import { SearchService } from '../services/search/search.service';
    
    export class ProductComponent implements OnInit {
    
    @Input() queryValue: string;
    
    ngOnInit() {
    }
    
    onClearFilter() {
      this.resetFilters();
      this._searchService.SetQueryValue(undefined);
      }
    }

另一个是：

import { Component, OnInit, Input, NgModule } from '@angular/core';
import { SearchService } from '../services/search/search.service';

export class MmSearchComponent implements OnInit {
  queryValue: string;

  constructor(
    private _searchService: SearchService,
    private _configService: ConfigService,
    )
  {
    this.defaultSearch = SearchFilter.ALL;
  }

  ngOnInit() {
  }

  listeningValue() {
   this.queryValue = this._searchService.GetQueryValue();
  }

每次其他服务设置变量时，我都会监听值返回未定义。每次都要听的东西。有可能吗？

【问题讨论】：

使用subject 或behaviourSubject 这是一个示例教程链接thinkster.io/tutorials/learn-rxjs-observables/…
谢谢，我使用了 behaviorSubject 并且效果很好！

标签： javascript html angular frontend client

【解决方案1】：

如果您正在寻找价值变化和基于价值变化采取的行动，那么最好的方法是使用主题。

https://www.youtube.com/watch?v=Ft5aDAKuW5Y

https://blog.angulartraining.com/rxjs-subjects-a-tutorial-4dcce0e9637f

【讨论】：

非常感谢，这正是我需要的！

【解决方案2】：

您必须将 BehaviourSubject 添加到您的 SearchService 并订阅它在您想要的每个组件中的更改：

@Injectable()
export class SearchService {
 private searchQuery: BehaviorSubject<string> = new BehaviorSubject(null);

 get searchQuery$(): Observable<string> {
  return this.searchQuery.asObservable();
 }

 updateSearchQuery(query: string): void {
   this.searchQuery.next(query);
 }
}

并在您的组件中使用此服务：

export class ProductComponent implements OnInit {
    
  constructor(private searchService: SearchService){}

  @Input() queryValue: string;
    
  onClearFilter() {
    this.resetFilters();
    this.searchService.updateQuery(undefined);
   }
 }

和你的第二个组成部分：

  export class MmSearchComponent implements OnInit {
      queryValue$: Observable<string>;
    
      constructor(
        private searchService: SearchService,
        private _configService: ConfigService,
        ){ this.defaultSearch = SearchFilter.ALL; }
    
      listeningValue() {
       this.queryValue$ = this.searchService.searchQuery$;
      }
    }

如果可能，请尽量避免组件中的可观察订阅，并在模板 queryValue$ | async 中使用异步管道。只是一个小建议，不要在服务名称中使用下划线 - 看看Angular Code Style

【讨论】：