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

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

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

您的代码看起来像这样

App.module.ts

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。还要确保将其保密。

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

3 个答案: