setTimeout之后的角度返回消息

Question

我想制作一个接收错误消息字符串的函数，然后在一段时间后消失，我想在我的应用程序中调用这个函数，这样就不需要每次出现错误响应时都写整个代码，我尝试了下面的代码，它运行良好，但我觉得它仍然很大，可以更短，请建议

此代码在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>

Answer 1

您可以编写一个服务来使用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);

希望得到帮助！

编辑时间：或者你想处理消息，你可以使用rxjs中的Subject，并编写这样的服务：

@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    
  });
  

Answer 2

您可以使用rxjs运算符，而不是定义自定义承诺：

async errorMessageClear() {
lastValueFrom(
timer(3000).pipe(
take(1),
map(() => '')
)
)
};

这基本上会做同样的事情：返回一个promise，它将在3秒钟后用一个空字符串解析。然而，你的警报关闭有点奇怪。通常在NgbAlert对象中，您有应该使用的.close()函数。