Angular HttpClient重构：Observable参数错误与路由替换问题

Let's break down and fix both problems you're facing when refactoring your API service with Angular's HttpClient:

1. Fixing the "Expected 1-2 arguments, but got 3" Error in getDossierEntryFileData #

What's happening #

Angular's native HttpClient.get() method only accepts 1 or 2 arguments: the target URL, and an optional HttpOptions object. Your old wrapped get method likely handled a third parameter (like a flag for full response) internally, but the native method doesn't support this directly. When you tried passing 3 arguments, TypeScript throws that type error.

How to fix it #

Since you're trying to get an HttpResponse<Blob>, you need to configure the observe option in the HttpOptions object to 'response' (this tells HttpClient to return the full HTTP response instead of just the body). Here's how to refactor the method:

// Refactored getDossierEntryFileData method
getDossierEntryFileData(url: string, params?: HttpParams): Observable<HttpResponse<Blob>> {
  // Configure options to get full response and handle blob type
  const options: HttpOptions = {
    observe: 'response' as const, // Ensures type safety for HttpResponse
    responseType: 'blob' as const, // Tells HttpClient to parse response as Blob
    params: params // Pass any query parameters if needed
  };

  // Add any additional headers or auth logic your old invoke method handled here
  // For example, if your invoke added auth tokens:
  // options.headers = new HttpHeaders().set('Authorization', `Bearer ${this.authToken}`);

  return this.http.get<Blob>(url, options);
}

This way, you're sticking to the native HttpClient's parameter structure while achieving the same full-response behavior your old method provided.

2. Fixing the Unreplaced {patientUUID} Route Parameter in getDossierEntry #

What's happening #

Your old wrapped get method used an invoke function that automatically replaced placeholders like {patientUUID} and {userId} with actual values, handled auth state, and set headers. When you call HttpClient.get() directly, none of this logic runs—so the URL remains with the placeholder, leading to a 404 when the server can't resolve it.

How to fix it #

You have a few solid options here:

Option 1: Reuse the existing invoke logic

If the invoke method is still available in your codebase, keep using it to handle the URL replacement and auth setup, but adapt it to work with HttpClient:

// Assuming your invoke method handles URL replacement and returns a cleaned URL + options
getDossierEntry(patientUUID: string): Observable<DossierEntry[]> {
  const rawUrl = '/api/patients/{patientUUID}/dossier-entries';
  // Let invoke handle placeholder replacement, auth headers, etc.
  const { url, options } = this.invoke(rawUrl, { patientUUID });
  
  return this.http.get<DossierEntry[]>(url, options);
}

Option 2: Extract the placeholder replacement logic into a utility function

If you don't want to rely on the old invoke method, create a small helper to replace route parameters:

// Utility function to replace URL placeholders
private replaceUrlPlaceholders(url: string, params: Record<string, string>): string {
  let cleanedUrl = url;
  Object.keys(params).forEach(key => {
    cleanedUrl = cleanedUrl.replace(`{${key}}`, params[key]);
  });
  return cleanedUrl;
}

// Refactored getDossierEntry method
getDossierEntry(patientUUID: string): Observable<DossierEntry[]> {
  const rawUrl = '/api/patients/{patientUUID}/dossier-entries';
  const cleanedUrl = this.replaceUrlPlaceholders(rawUrl, { patientUUID });

  // Add any auth headers or other options your old invoke handled
  const options: HttpOptions = {
    headers: new HttpHeaders().set('Authorization', `Bearer ${this.getAuthToken()}`)
  };

  return this.http.get<DossierEntry[]>(cleanedUrl, options);
}

Option 3: Use Angular's HttpClient with parameterized URLs (template literals)

For simpler cases, you can directly inject the patientUUID into the URL using template literals:

getDossierEntry(patientUUID: string): Observable<DossierEntry[]> {
  const url = `/api/patients/${patientUUID}/dossier-entries`;
  
  // Add headers/auth as needed
  const options: HttpOptions = { /* ... */ };

  return this.http.get<DossierEntry[]>(url, options);
}

This is straightforward but less scalable if you have multiple placeholders or need consistent auth handling across all requests.

内容的提问来源于stack exchange，提问作者mightycode Newton