Angular 服务将数据传递给组件

Question

I have search field in my top-bar component and I need to get input value of that search field in one of my components, but it doesn't pass the value.

Structure

1. Search service
2. Top bar component
3. Result component

Logic

1. Top bar component receive input value then pass it to Search service
2. Result component receive input value from Search service and do it's process

What I have so far

1. Can get input value in Top bar component
2. Can't get any value in Result component

Code

TopBar component

// HTML
<input nz-input nzBorderless placeholder="Search here..." (keydown.enter)="onInput($event)" style="background-color: #F3F6FC;" />

// SCRIPT

import { SearchServiceService } from 'src/app/services/search/search-service.service';
@Input() searchName: string;
constructor(
    private globalSearchService: SearchServiceService,
) {}

public onInput(event: any){
    // this pushes the input value into the service's Observable.
    this.globalSearchService.searchTerm.next(event.target.value);
}

Search service

export class SearchServiceService {
  public searchTerm: BehaviorSubject<string> = new BehaviorSubject<string>(null);
  constructor() { }
}

Result component

import { SearchServiceService } from 'src/app/services/search/search-service.service';

public searchTerm: string = "";

constructor(
  private globalSearchService: SearchServiceService
) { }

ngOnInit(): void {
  // this listens to the input value from the service and does something on change.
  this.globalSearchService.searchTerm.subscribe((newValue: string) => {
    console.log('search newValue :', newValue); // Nothing prints here!
    // this is where you would apply your existing filtering.
    this.searchTerm = newValue;
  });
}

Any idea?

Update

Q: How did I register my search service?

A:

import { SearchServiceService } from 'src/app/services/search/search-service.service';

const MODULES = [CommonModule, RouterModule, AntdModule, TranslateModule, InfiniteScrollModule, FormsModule, ReactiveFormsModule]

@NgModule({
  imports: [...MODULES],
  declarations: [ACLComponent],
  exports: [...MODULES],
  providers: [SearchServiceService],
})
export class SharedModule {}

Answer 1

You're using the BehaviourSubject wrong here. Implement like so. also please don't expose all your variables as public and remove constructors not being used

export class SearchServiceService {
  searchTerm: BehaviorSubject<string> = new BehaviorSubject<string>(null);
  $searchTerm = this.searchTerm.asObservable();
}

and then in your Result Component you subscribe to the Observable , not the BehaviourSubject

import { SearchServiceService } from 'src/app/services/search/search-service.service';

searchTerm: string = "";

constructor(
  private globalSearchService: SearchServiceService
) { }

ngOnInit(): void {
  this.globalSearchService.$searchTerm.subscribe((newValue: string) => {
    this.searchTerm = newValue;
  });
}

Answer 2

Solved

All I had to do was moving my service provider from shared module to app main module and rebuild (serve) my app.