Question

我想问一下Angular 4中的组件刷新。

我的页面有这个结构：

产品组件

产品过滤器组件
产品列表组件

我想要的是连接产品过滤器和产品列表，因此如果用户更改其首选过滤器，产品列表数据将会更改。

我已经搜索过，看起来创建服务将是一个解决方案，但我不确定如何创建此服务以及服务如何工作。（我仍然了解Angular 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);
  }

}

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

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

接下来是直截了当的。（*请不要忘记在构造函数中定义服务实例。我提到这是因为你正在学习Angular。我希望你已经知道如何使用服务。抱歉。:)）。

FilterChangeEvent的{p> 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();
  }

使用服务的其他人的Angular 2刷新组件

1 个答案: