Question

我正在尝试在2个组件之间进行通信。筛选器组件正在尝试通过服务http-service向结果组件发送消息。

我已经可以向服务http-service发送消息，但是即使我已订阅，也无法在结果服务中接收消息。这是代码

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个不同的位置提供服务，一次是在根目录下，另一个是在每个组件上...从组件中的提供程序数组中删除该服务，这将起作用。

您在每个提供服务的地方都会向插入组件树的该部分的任何组件提供该服务的新副本。有时这是需要的，有时不是。在这种情况下，这似乎不是您想要的。如果您确实希望多个独立的结果/过滤器组件不共享一项服务，则可能不得不重新考虑页面结构或创建一些封装组件或指令来提供服务。

Angular 6-无法使用主题订阅消息

1 个答案: