Question

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

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

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

我正在使用共享服务来使用Subject发出索引数据。 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.compomnent.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

将您的Subject更改为私有属性，并使用属性getter将Subject返回为Observable。另外，请确保您使用的是服务的同一实例，将其定义为模块级别的提供程序或父组件内部的上一级。

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

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

无法订阅主题数据

2 个答案: