我想創建一個接收錯誤訊息字串的函式，然后在一段時間后消失，我想在我的應用程式中呼叫這個函式，所以每次我有錯誤回應時都不需要撰寫整個代碼，我嘗試了下面的代碼，它作業正常但我覺得它仍然很大，可以更短，請指教
commonService.ts 檔案中的此代碼
clearErrorMsg = () => {
return new Promise<string>((resolve) => {
setTimeout(() => {
resolve('');
}, 3000);
});
};
async errorMessageClear(){
return await this.clearErrorMsg();
};
在這里我從不同的 ts 檔案中呼叫它
const mainFunction = async () => {
this.error = err.message;
this.error = await this._commonService.clearErrorMsg();
};
mainFunction();
HTML
<ngb-alert [type]="'danger'" [dismissible]="false"
*ngIf="error">
<div class="alert-body">
<p>{{error}}</p>
</div>
uj5u.com熱心網友回復：
您可以撰寫一個服務來顯示錯誤訊息，MatSnackBar: @angular/material/snack-bar如下所示：
@Injectable({ providedIn: 'root'})
export class ToastrService {
constructor(private snackbar: MatSnackBar) { }
success(message: string) {
this.snackbar.open(message, undefined, { panelClass: 'success', duration: 5000 });
}
error(message: string) {
this.snackbar.open(message, undefined, { panelClass: 'error', duration: 5000 });
}
info(message: string) {
this.snackbar.open(message, undefined, { panelClass: 'info', duration: 5000 });
}
warning(message: string) {
this.snackbar.open(message, undefined, { panelClass: 'warning', duration: 5000 });
}
}
duration: 5000=> 訊息將在 5 秒后隱藏。那么當你使用時：private toastr: ToastrService在建構式中宣告- 出錯時顯示：
this.toastr.error(message);
希望這有幫助！
已編輯：或者您想獲取要處理的訊息，您可以使用Subjectfromrxjs并撰寫如下服務：
@Injectable({ providedIn: 'root'})
export class MessageService {
private subject = new Subject<any>();
sendMessage(message: any) {
this.subject.next(message);
}
clearMessages() {
this.subject.next(null);
}
getMessage(): Observable<any> {
return this.subject.asObservable();
}
}
然后在你想要的地方使用：
宣布
private messageService: MessageService得到這樣的訊息：
this.messageService.getMessage().subscribe(response => { // your code });
uj5u.com熱心網友回復：
您可以使用rxjs運算子而不是定義自定義承諾：
async errorMessageClear() {
lastValueFrom(
timer(3000).pipe(
take(1),
map(() => '')
)
)
};
這基本上會做同樣的事情：回傳一個承諾，它將在 3 秒后用一個空字串決議。然而，關閉警報有點奇怪。通常在 NgbAlert 物件中你有.close()應該使用的函式。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/527713.html
標籤：有角度的