Angular 6 - Невозможно подписаться на сообщения, используя тему

Question

Я пытаюсь установить связь между двумя компонентами. Компонент фильтра пытается отправить сообщение компоненту результата через сервис http-service.

Я могу отправить сообщение в сервис http-сервис, но не могу получить сообщение в сервисе результатов, даже если я подписан. Вот код

view.module.ts

@NgModule({
declarations: [FilterComponent, ResultComponent],
imports: [
CommonModule,
FormsModule,
AgGridModule.withComponents(
    []
)
})

HTTPService

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

@Injectable({
providedIn: 'root'
})

export class HttpServiceService {

    private subject = new Subject<any>();

    sendMessage(message: string) {
            this.subject.next({ text: message });
     }

    clearAnswers() {
        this.subject.next();
    }

    getMessage(): Observable<any> {
      return this.subject.asObservable();
    }
}

filter.component.ts

import{Component, OnInit}from '@angular/core';
import {HttpServiceService}from '../http-service.service';

@Component({
selector: 'app-filter',
templateUrl: './filter.component.html',
styleUrls: ['./filter.component.css'],
providers: [ HttpServiceService ]
})

export class FilterComponent implements OnInit {

constructor(private httpService:HttpServiceService) { }


  onFormSubmit() {
    this.httpService.sendMessage('Form submitted');
  }

}

result.component.ts

import{Component, OnDestroy}from '@angular/core';
import {Subscription}from 'rxjs';
import {GridOptions}from "ag-grid-community";
import {HttpServiceService}from '../http-service.service';

@Component({
selector: 'app-result',
templateUrl: './result.component.html',
styleUrls: ['./result.component.css'],
providers: [ HttpServiceService ]

})

export class ResultComponent implements OnInit {

message : any;
subscription: Subscription;

constructor(private httpService: HttpServiceService) {
        // subscribe to home component messages
        this.subscription = this.httpService.getMessage().subscribe(message => {console.log(message);  });
    }

    ngOnDestroy() {
        // unsubscribe to ensure no memory leaks
        this.subscription.unsubscribe();
    }
}

Answer 1

вы предоставляете сервис в 3 разных местах, один раз в корне и снова в каждом компоненте ... удалите сервис из массивов провайдера в компонентах, и это будет работать.

Каждое место, в котором вы предоставляете услугу, дает новую копию этой услуги любому компоненту, который внедряется в эту часть дерева компонентов. Иногда это желательно, иногда нет. В этом случае кажется, что это не то, что вы хотите. Если вы хотите, чтобы несколько независимых компонентов результатов / фильтров не использовали один и тот же сервис, вам, вероятно, придется переосмыслить структуру страницы или создать какой-то инкапсулирующий компонент или директиву для предоставления сервиса.