主题在两个不相关的组件之间不起作用

我有两个组件，sourceComponent和targetComponent。我想要对sourceComponent中的按钮单击事件在targetComponent中执行一个功能。我决定为此使用Subject。

sourceComponent.ts

export class SourceComponent{
    constructor(private btnclk: ButtonClickService){}
       onButtonClick(){
           this.btnclk.updateButtonClick(event);
       }
}

targetComponent.ts

export class TargetComponent{
    constructor(private btnclk: ButtonClickService){
        this.btnclk.getButtonClick().subscribe(event=>{
            console.log('Click from source component to target component') // not working
        });
    }
}

ButtonClickService.ts

@Injectable()
export class ButtonCLickService{
    private btnclk = new Subject();

    getButtonClick() : Observable{
        return this.btnclk.asObservable();
    }

    updateButtonClick(event : Event){
        this.btnclk.next(event);
    }
}

但是，当我在appComponent.ts中订阅相同的click事件时，它工作正常。

appComponenet.ts

export class AppComponent{
    constructor(private btnclk: ButtonClickService){
        this.btnclk.getButtonClick().subscribe(event=>{
          console.log('Click from source component to app component') //working
        });
    }
}

请解释为什么它在父组件和子组件之间起作用，而在两个不相关的组件之间不起作用。还请帮助我如何在两个不相关的组件之间进行这项工作。提前致谢

对于全局服务，您应该在根级别（通常是根NgModule或using providedIn: 'root'）中提供一次以使用该服务的同一实例（单个服务）。来自Angular文档（https://angular.io/guide/singleton-services）

我为您提供了示例演示，它将按您的预期工作：

ButtonClickService

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

interface Event {
  type: string;
  data: any;
}

@Injectable({
  providedIn: 'root' // <= using `providedIn: 'root'` to provide at root level
})
export class ButtonClickService {

  private btnclk = new Subject();

  getButtonClick(): Observable {
    return this.btnclk.asObservable();
  }

  updateButtonClick(event: Event) {
    this.btnclk.next(event);
  }

}

应用模块

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent, SourceComponent, TargetComponent ],
  bootstrap:    [ AppComponent ],
  providers: [] // <= don't need to provide on any NgModule
})
export class AppModule { }

在线演示：https : //stackblitz.com/edit/angular-kxj1ax