Angular + Rxjs运算符-如果api未在5秒内完成，则显示装载器，显示toastr并隐藏装载器

Angular是一种流行的前端框架，而RxJS是一个库，它提供了一组功能丰富的操作符，用于处理异步数据流。在Angular中使用RxJS的运算符可以实现一些强大的功能，例如在API请求未在指定时间内完成时显示加载器，并显示提示信息。

首先，我们可以使用RxJS的操作符来设置一个定时器，当超过5秒时，触发一个事件。在这个事件中，我们可以显示一个加载器来指示正在进行的操作。以下是一个示例代码：

import { timer } from 'rxjs';
import { tap } from 'rxjs/operators';

// 在组件中定义一个布尔变量用于控制加载器的显示与隐藏
isLoading: boolean = false;

// 在Angular的组件类中使用RxJS的运算符
// 在API请求开始时，将isLoading设置为true，显示加载器
// 在API请求结束时，将isLoading设置为false，隐藏加载器
makeAPICall() {
  this.isLoading = true;

  // 使用timer运算符设置一个5秒的定时器
  // 当定时器到达时，触发tap运算符内的回调函数
  timer(5000).pipe(
    tap(() => {
      this.isLoading = false;
      // 显示toastr提示信息
      this.showToastr();
    })
  ).subscribe();
}

showToastr() {
  // 显示toastr提示信息的逻辑
}

在上述代码中，当调用makeAPICall()函数时，会先将isLoading变量设置为true，显示加载器。然后使用timer运算符设置一个5秒的定时器，在定时器到达时，使用tap运算符内的回调函数将isLoading变量设置为false，隐藏加载器，并调用showToastr()函数显示提示信息。

关于加载器和toastr的具体实现，可以使用一些前端UI组件库中的组件来实现，例如ngx-spinner用于显示加载器，ngx-toastr用于显示提示信息。

总结：通过使用Angular和RxJS的运算符，我们可以很方便地实现在API请求未在5秒内完成时显示加载器，并显示提示信息的功能。具体实现中，可以使用一些前端UI组件库来完成加载器和提示信息的显示。