使用服务的其他用户的角2刷新组件

Question

我想问一下第四角的清爽成分。

我有一个页面的结构：

产品组件

• 产品过滤元件
• 产品列表组件

我想要的是连接产品过滤器和产品列表，所以如果用户更改他的首选过滤器，产品列表数据就会改变。

我已经搜索过了，看起来创建一个服务将是一个解决方案，但是我不知道如何创建这个服务以及服务如何工作。(我仍然了解到2/4角是如何工作的，这是我的第一个JavaScript框架)。

Answer 1

为从ProductFilterComponent订阅事件创建一个新服务。

import { Injectable } from '@angular/core';
import { Observable, Subject, ReplaySubject } from 'rxjs';

@Injectable()
export class EventSubscribeService {

  private eventSubject: Subject<any> = new ReplaySubject(1);

  constructor() { }

// set observable of this subject
  get $getEventSubject(): Observable<any> {
    return this.eventSubject.asObservable();
  }
// remove from observer
  resetEventObserver(): void {
    this.eventSubject = new ReplaySubject(1);
  }
// send event to observers
  sendCustomEvent():void {
    this.eventSubject.next(true);
  }

}

然后将此服务定义为模块的provider，其中包含ProductCompont及其子组件。

@NgModule({
...
providers: [
    ...
    EventSubscribeService
    ...
  ],
...

下一个是直接前进。(*请不要忘记在构造函数中定义服务实例。我之所以提到这一点，是因为你在学习角。我希望你已经知道如何使用服务了。对不起。

FilterChangeEvent of ProductFilterComponent可能是这样的。

编辑： ProductFilterComponent模板

...
<button class="btn btn-default" (click)="onFilterChangeEvent($event)">ChangeFilterButton<button>
...

更新：ButtonClickEvent可以按下面的方式处理

onFilterChangeEvent(param:any):void {
    this.serviceInstance.sendCustomEvent();
  }

最后一件事是在ProductListComponent中获得订阅事件。

 constructor(
      private serviceInstance: EventSubscribeService,
  ) {
    this.serviceInstance.$getEventSubject.subscribe(event => {
      // here you can do anything what you are going to do
    });
  }


ngOnDestroy() {
    this.serviceInstance.resetEventObserver();
  }