要在 Angular 17 中訂閱服務時捕獲錯誤並切換載入或其他 UI 狀態，您可以使用 observables 的 subscribe 方法以及 RxJS 運算子（如 catchError）。以下是逐步方法：
範例：
1。帶有載入指示器的服務呼叫：
2。處理錯誤：
範例程式碼：
import { Component } from '@angular/core';
import { MyService } from './my-service.service'; // Your service here
import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';
import { ToastrService } from 'ngx-toastr'; // If you are using Toastr for notifications
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html'
})
export class MyComponent {
loading = false; // Flag to toggle loading indicator
data: any = null; // Variable to hold the service response data
constructor(private myService: MyService, private toastr: ToastrService) { }
getData() {
this.loading = true; // Start loading before the service call
this.myService.getData() // Call the service method
.pipe(
catchError((error) => {
this.toastr.error('Failed to fetch data', 'Error'); // Show an error notification
console.error(error); // Log the error (optional)
this.loading = false; // Stop loading on error
return of(null); // Return an empty observable to prevent further issues
})
)
.subscribe(
(response) => {
this.data = response; // Handle successful response
this.toastr.success('Data fetched successfully!', 'Success'); // Success notification
},
() => {
this.loading = false; // Stop loading on error (handled in catchError as well)
},
() => {
this.loading = false; // Stop loading on completion (either success or error)
}
);
}
}
重點：
載入標誌：載入標誌用於顯示/隱藏載入微調器。它在服務呼叫之前設定為 true，並在錯誤和完成回調中重設為 false。
錯誤處理：catchError 運算子用於捕獲錯誤、處理錯誤（例如，記錄錯誤、顯示通知）並防止應用程式崩潰。它傳回一個空的 observable (of(null))，以便訂閱可以完成。
Toastr 通知：ToastrService 用於顯示成功和錯誤事件的通知。如果您使用其他東西，請根據您的通知系統進行調整。
此方法可協助您維護載入狀態、擷取錯誤並優雅地處理成功和失敗場景，同時保持 UI 回應能力。
以上是Angular 中的全域錯誤處理的詳細內容。更多資訊請關注PHP中文網其他相關文章！
