无法订阅主题数据

Question

我正在使用共享服务通过主题发出数据。在一个组件中，我尝试订阅主题数据，但它从不订阅

我正在通过组件 A 中的主题发送索引数据，如下所示 组分A

export class ComponentA {
  onEditTestCase(index: number){
    this.sharedService.startedEditing.next(index);
  }
}

我正在使用共享服务通过主题发出索引数据。 shared.service.ts

import { Subject } from 'rxjs/Subject';

export class SharedService {

constructor(private sharedService: SharedService, private router: Router) {}

  startedEditing = new Subject<number>();
}

在组件 B 中，我尝试订阅，但它从不订阅。 B组份

import { Subscription } from 'rxjs';
export class ComponentB {
subscription: Subscription;

constructor(private router: Router, private sharedService: SharedService, 
  private route: ActivatedRoute) {}


ngOnInit() {
  this.subscription = this.sharedService.startedEditing
    .subscribe((index: number) => {
      this.editIndex = index;
      this.editMode = true;
      this.editedTestCase = this.sharedService.getTestCase(this.editIndex);
      this.testForm.setValue({
        testid: this.editedTestCase.testid,
        testPriority: this.editedTestCase.testPriority,
        testSummary: this.editedTestCase.testSummary
      });
    });
   }
 }

我在上面的代码中做错了吗？

Answer 1

尝试使用ReplaySubject 而不是Subject。

尝试实现以下代码

common.setvice.ts

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

@Injectable({
  providedIn: 'root'
})

export class CommonService {

  private startedEditing = new ReplaySubject<any>();
  public startedEditing$ = this.startedEditing.asObservable();
  constructor() { }

  setData(data) {
    this.startedEditing.next(data);
  }

}

a.component.ts

import { Component } from '@angular/core';
import { CommonService } from './common.service'

@Component({ templateUrl: 'a.component.html' })
export class AComponent {
    constructor( 
        private commonService: CommonService
     ) { }

    ngOnInit() {
        this.commonService.setData('data from component A');
    }
}

b.component.ts

import { Component } from '@angular/core';
import { CommonService } from './common.service'

@Component({ templateUrl: 'b.component.html' })
export class BComponent {
    constructor( 
        private commonService: CommonService
     ) { }

    ngOnInit() {
        this.commonService.startedEditing$.subscribe(data => {
            console.log(data); // this will print "data from component A";
        });
    }
}

如果上面的代码不清楚，请告诉我。

Answer 2

将您的主题更改为私有属性，并使用属性获取器将主题作为可观察对象返回。 还要确保您使用的是同一个服务实例，将其定义为模块级别的提供者或父组件内的上一级提供者。

import { Subject } from 'rxjs/Subject';
export class SharedService {
private startedEditing = new Subject<number>();

public get StartEditing(): Observable<number> {
return this.startedEditing.asObservable();
}