0

我尝试了许多可能的解决方案，这些解决方案几乎与在共享服务中使用 ReactiveX Observables 的解决方案完全相同。我可以在服务中触发 change() 函数，但据我所知……总是这样。this.dataSource.next(param) 不会触发 component2 中的 Observable data$。我尝试的一个示例解决方案是在 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)
        })
        }
}
4

3 回答 3

0

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

在这里正确使用它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 { }
于 2018-05-17T04:55:18.643 回答
0

欢迎来到 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');
于 2018-05-17T04:57:48.770 回答
0

在你的服务中试试这个

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)
    }
}

而不是订阅 data$，而是订阅 dataSource。还要确保将其保持为公开状态。

于 2018-05-17T05:04:32.027 回答