Question

我正在使用Angular 2项目。我正在尝试使用typescript中的observable和服务。我正在触发一个事件，但我的observable中的事件处理程序没有运行。

这是我的代码：

服务：

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

@Injectable()
export class AllDataPageService {

    receptorFilterChanged$ = new Subject<any>();

}

该服务由一个事件组成：receptorFilterChanged。

以下是触发事件的组件（位于〜\ src \ results \ app \ all-data-page）

import { AllDataPageService } from './all-data-page.service';

...

@Component({
    selector: 'all-data-page',
    templateUrl: './all-data-page.component.html',
    styles: [require('./all-data-page.style.scss')],
    providers: [AllDataPageService]
})
export class AllDataPageComponent implements OnInit {

...

    constructor(private allDataPageService: AllDataPageService) {}

...

filterByReceptorTag() {

...

this.allDataPageService.receptorFilterChanged$.next(50.0);

...

}

...

}

所以它是上面函数filterByReceptorTag（）中的this.allDataPageService.receptorFilterChanged $ .next（50.0）行触发事件。我已在Chrome调试器中确认此行已执行。

以下是处理receptorFilterChanged事件的组件（位于〜\ src \ results \ app \ shared \ components \ all-data-row）

import { AllDataPageService } from '../../../all-data-page/all-data-page.service';

...

@Component({
  selector: 'all-data-row',
  templateUrl: './all-data-row.component.html',
  styles: [ require('./all-data-row.style.scss') ],
  encapsulation: ViewEncapsulation.None,
  providers: [AllDataPageService]
})
export class AllDataRowComponent implements OnInit {

...

  constructor(private allDataPageService: AllDataPageService) {
      this.allDataPageService.receptorFilterChanged$.subscribe(
          (value) => {

...

          }
      );
  }

...

}

当receiverFilterChanged触发时，我订阅的事件处理程序不会运行。

任何人都可以看到可能发生的事情吗？

感谢。

Answer 1

您的“AllDataPageService”的范围限定为AllDataPageComponent和AllDataRowComponent。这意味着每个组件都会获得该AllDataPageService服务的新实例。

你应该删除

providers: [AllDataPageService]

从每个组件中移动到“模块”。这样，您只需要一个服务实例，这样他们就可以互相交流。

Answer 2

任何人都可以看到可能发生的事情吗？

时间问题。在subscribe之后发生next，因此未获得原始值

使用typescript服务和observables：为什么我的事件处理程序不会运行？

2 个答案: