Question

我有一个组件A，它向服务方法发送一个值（通过调用它），然后我尝试创建一个主题并从组件B“观察”它，从而触发了对组件B的操作。 A部分这就是我所做的：

组件A发送数据：

this.service.method(id_estado)

服务收到的消息：

import { Injectable } from '@angular/core';
import { BehaviorSubject, of, Observable, Subscription, Subject  }    from 'rxjs';
export class service {
    estado: any;
    subject = new Subject<any>();
    constructor( private api: ApiService ) {
    } 
    service ( id_estado ){
        let subject = new Subject<any>();
        this.subject.next(estado)
    }
}

在组件B中，我试图这样观察它：

this.service.subject.subscribe( (data) => {
     console.log(data);
});

组件B的一部分发生在方法内部。这是问题的原因吗？我无法在console.log上显示任何数据

Answer 1

let subject = new Subject<any>();
this.subject.next(estado)

-应该移至构造函数进行初始化。

或仅在构造函数中执行服务：

import { Injectable } from '@angular/core';
import { BehaviorSubject, of, Observable, Subscription, Subject  }    from 'rxjs';
export class service {
    estado: any;
    subject = new Subject<any>();
    constructor( private api: ApiService ) {
        service(true); // or some value you need.
    } 
    service (id_estado){
        this.subject.next(estado);
    }
}

在这种情况下，您可以在构造函数之前删除初始化subject = new Subject<any>();。

在您的情况下，您刚获得Subject，但没有执行.next()。

Answer 2

您应该尝试使用angular的事件发射器服务，在该事件中，您可以使用事件发射器服务在任何组件中传递数据值来订阅数据。

Answer 3

组件B的一部分发生在方法内部。这是原因问题吗？

是的，就是这个问题。如果未调用该方法，则说明您没有订阅Subject，这就是为什么没有收到数据的原因。

将此订阅部分移至组件B的ngOnInit。

在服务中，每当调用该方法时，您都将创建一个新的Subject。 Subject已在开头定义，无需再次执行。

更改后，您的服务应如下所示：

export class service {
    estado: any;
    subject = new Subject<any>();

    constructor( private api: ApiService ) {
    } 

    service(id_estado) {
      this.subject.next(estado);
    }
}

查看此StackBlitz，您可以在其中看到使用Subject实时通信的组件。

在服务无法正常运行的情况下可以观察到主题

3 个答案: