通过调用component2中的函数来处理component1.onClick。不是父/子组件。角度5和Rxjs

Question

我尝试了许多可能的解决方案，这些解决方案在共享服务中使用ReactiveX Observables几乎完全相同。我可以在服务中触发change（）函数，但就我而言......总是如此。 this.dataSource.next（param）不会触发component2中的Observable数据$。我试过的一个示例解决方案是在Broadcasting events mannually in Angular 5。请帮忙。

.
.
Import { EventProxyService } from ‘event-proxy.service’
@Component({
       .
       .
       providers: [ EventProxyService ]
})
export class Component1 {
    constructor(private eventProxyService: EventProxyService){}
    onClick(){
        console.log(“onClick clicked”)
        this.eventProxyService.change(“1”)
    }
}

import { Injectable } from '@angular/core'
import { Observable } from 'rxjs/Observable'
import { Subject } from 'rxjs/Subject'
@Injectable()
export class EventProxyService {
    private dataSource = new Subject<any>()
    data$ = this.dataSource.asObservable()
    change(param: any) {
        console.log("in service", param)
        this.dataSource.next(param)
    }
}

Import { EventProxyService } from ‘event-proxy.service’
@Component({
.
.
    providers: [ EventProxyService ]
})
export class Component2 implements OnInit {
    constructor(private eventProxyService: EventProxyService){}
    ngOnInit() {

        this.eventProxyService.data$.subscribe((param: any) => {
            console.log("in jobs", param)
        })
        }
}

Answer 1

这里的问题是您分别在两个不同的组件中提供相同的服务。这将创建两个不同的服务对象，并将其用于每个服务。因此，最好始终在根模块中提供服务，或者至少在父模块中为将要使用该服务的所有组件提供服务，这样您就不会在这种问题中运行。

这里使用它正确地在根模块或父模块中为将要使用该服务的所有组件提供EventProxyService。请从组件中删除提供程序，并在App.module.ts或父模块中为这两个组件提供服务。

你的代码看起来像这样

.
.
@Component({
    .
    .
})
export class Component1 {
    constructor(private eventProxyService: EventProxyService){}
    onClick(){
        console.log(“onClick clicked”)
        this.eventProxyService.change(“1”)
    }
}

import { Injectable } from '@angular/core'
import { Observable } from 'rxjs/Observable'
import { Subject } from 'rxjs/Subject'
@Injectable()
export class EventProxyService {
    private dataSource = new Subject<any>()
    data$ = this.dataSource.asObservable()
    change(param: any) {
        console.log("in service", param)
        this.dataSource.next(param)
    }
}


@Component({
.
.
})
export class Component2 implements OnInit {
    constructor(private eventProxyService: EventProxyService){}
    ngOnInit() {

        this.eventProxyService.data$.subscribe((param: any) => {
            console.log("in jobs", param)
        })
    }
}
import { NgModule } from '@angular/core';
Import { EventProxyService } from ‘event-proxy.service’
@NgModule({
    .
    .
    providers: [
        EventProxyService 
    ],
    .
    .
})
export class AppModule { }

Answer 2

欢迎来到Stackoverflow。

有很多方法可以解决这个问题。确实有一种方法是使用注射服务。

我会创建一个Subject或BehaviorSubject变量（根据您的需要）并使用它来更新组件。事情如下：

service
changeVariable: Subject = new Subject();

component1
this.service.changeVariable.subscribe(
  data => console.log(data)
);

component2
this.service.changeVariable.next('the new value');

Answer 3

在您的服务中试试这个

import { BehaviorSubject} from 'rxjs/BehaviorSubject'
@Injectable()
export class EventProxyService {
    public dataSource = new BehaviorSubject<any>()
    change(param: any) {
        console.log("in service", param)
        this.dataSource.next(param)
    }
}

而不是订阅数据$，订阅dataSource。还要确保将其保密。