I'm building a small app for practice where I have a search bar. If the user writes in a name and click on a result it will redirect them to the given page. However, only the first search works, as soon as the component was loaded new clicks in the search bar won't be recognized if you are on the component page. If you navigate to another page, the first search works again. To prevent the problem from happening I tried to use params.subscribe to react to any subsequent search but it doesn't work and google was not my friend in this particular case. Does anyone have an idea why it doesn't work on subsequent click events?
Search result component's click method:
setCryptoName(clickedCrypto: string) {
this.cryptoName = clickedCrypto;
this.router.navigate(['/all-cryptos/details', this.cryptoName]);
}
The details component which receives the data, retrieves the name from the URL (cryptoName) and sends a request to the server
cryptoName!: string;
cryptoItem$ = new BehaviorSubject<any>(null);
constructor(
private route: ActivatedRoute,
private cryptoItemsService: CryptoItemsService,
private router: Router
) {}
ngOnInit(): void {
this.cryptoName = this.route.snapshot.params['name'];
this.route.params.subscribe((params: Params) => {
this.cryptoName = params['name'];
});
this.cryptoItemsService
.mergeFetchedAllCryptos()
.subscribe((everyCryptoItem) => {
this.cryptoItem$.next(some code);
});
}
If I subscribe to the changing param why don't I receive the data?