如何将动态查询URL传递给server - angular

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SearchService {
  private apiUrl = 'https://api.example.com/search';

  constructor(private http: HttpClient) {}

  search(query: string): Observable<any> {
    let params = new HttpParams();
    params = params.set('q', query);

    return this.http.get(this.apiUrl, { params });
  }
}

import { Component } from '@angular/core';
import { SearchService } from './search.service';

@Component({
  selector: 'app-search',
  template: `
    <input type="text" [(ngModel)]="query" placeholder="Enter search term" />
    <button (click)="search()">Search</button>
  `
})
export class SearchComponent {
  query: string;

  constructor(private searchService: SearchService) {}

  search() {
    this.searchService.search(this.query).subscribe(response => {
      console.log(response);
    });
  }
}

import { encodeURIComponent } from '@angular/common';

let encodedQuery = encodeURIComponent(this.query);
params = params.set('q', encodedQuery);

import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';

search(query: string): Observable<any> {
  let params = new HttpParams();
  params = params.set('q', query);

  return this.http.get(this.apiUrl, { params }).pipe(
    catchError(error => {
      console.error('Error:', error);
      return of(null);
    })
  );
}