使用settimeout的角度延迟视图更新

Question

由于应用程序数据库更新如此之快，因此我们添加了一个物质进度栏，以帮助视觉提示，以表明发生了一些事情。

我们的逻辑是，我们将进度栏设置为最小延迟500ms。我们将表演加载设置为启动进度键，然后执行任务，然后致电HideloDADING关闭ProgressBar。如果最小延迟被超过，则该进度键停止，如果没有，它将等到最小延迟时间过时，而Settimeout将负责停止。要明显这部分正在起作用。

我们遇到的问题是，当我们执行任务并要更新UI IE时。将结果显示在表中，直到SettiMeout完成为止。

我已经将console.log放在适当的位置，任务正在运行，返回结果是purley，视图没有更新。

加载程序服务

export class LoaderService {

private _isLoading = false;
private _inProgress = false;
private _delayFinished = false;

private minimumProgressDelay: number = 200;

public get isLoading() {
    return this._isLoading;
}

public showLoading(delay?: number) {
    this._isLoading = true;
    this._inProgress = true;
    this._delayFinished = true;
    delay = delay ? delay : this.minimumProgressDelay;

    setTimeout(() => {
        this._delayFinished = false;
        if (!this._inProgress) {
            this._isLoading = false;
        }
    }, delay);
}

public hideLoading() {
    this._inProgress = false;
    if (!this._delayFinished) {
        this._isLoading = false;
    }
}

}

eNcers bar in header组件中

<div *ngIf="showLoading">
  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>

的典型使用加载器

async search(): Promise<void> {
    this.uiService.loader.showLoading(500);

    await this.getResults();

    this.uiService.loader.hideLoading();
}

getResults函数基本上执行异步HTTPRequest以获取结果，然后设置表的数据属性。

如前所述，代码所有作品excpet excpet在延迟完成之前，对表的更新将不会更新。例如。如果我们将其设置为10000ms，则需要等到10秒钟显示结果。

Answer 1

您的加载服务

我对您要做的事情有些困惑，但我会尽力解释发生了什么。您说您不希望该服务在继续前进之前等待10秒。但是，您会说出10秒钟的超时服务似乎有意使用户无缘无故地等待。

您是否是指使用setInterval而不是settimeout？在这种情况下，您可能需要使用计时器，它允许您同时设置初始延迟和间隔时间。但是即使那样，我也不了解您的代码。似乎您并没有试图将其投票到后端服务的任何API的终点。

正如Drenai所指出的那样，这是正确的，看起来您正在尝试创建一种非常缓慢观察服务中一些变量的方法。我看到的方式在您的LoadingService中没有任何逻辑，除了可能存储布尔值之外。但是，您可以在组件本身中这样做。

这种代码的平静已经使它已经使它等待，因此将加载到false之前等待，这使得服务中的逻辑是多余的：

await this.getResults();

您可以将这些布尔值推到capisy> civation usibject，并且观察来自任何地方如果那是您要完成的工作。

在服务中：

export class LoadingService {
  private loadingSubject = new BehaviorSubject(false);

  get loading$() {
    return this.loadingSubject.asObservable();
  }

  showLoading() {
    this.loadingSubject.next(true)
  }

  hideLoading() {
    this.loadingSubject.next(false)
  }
}

要观察组件中的布尔值：

ngOnInit() {
  this.loadingService.loading$.subscribe(
    value => {
      this.loading = value
    }
  )
}

我创建了一个 stackblitz 表明它只是有效的。也许我理解您错了，您可以将其用作创建问题最小再现的起点。

进行轮询

，以防您试图从后端获取数据，请检查此有关轮询的问题并使用计时器来做到这一点。

解析器服务

以防您想在路由时获取数据，我会建议使用解析器。

您制作一个调用您服务的解析器：

export class DataResolverService implements Resolve<DataResolved> {
  
  constructor(
    private dataService: DataService
  ) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): DataResolved | Observable<DataResolved> | Promise<DataResolved> {
    return this.dataService.getData()
    .pipe(
      map(data => ({ data })),
      catchError(error => {
        const message = `Retrieval error: ${error}`
        console.error(message)
        return of({ data: [], error: message } as DataResolved)
      })
    )
  }
}

示例数据服务：

export class DataService {
  private dataUrl = 'api/data';

  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get<Data[]>(this.dataUrl);
  }
}

然后将解析器添加到路线上：

{
  path: '',
  component: SomeComponent,
  resolve: { resolvedData: DataResolverService },
}

在组件中，您可以从路由器快照中获取上面描述的ResolvedData，或者您可以订阅该路由的数据

export class SomeComponent implements OnInit {
  data: Data[];

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.data = this.route.snapshot.data['resolvedData'].data;
  }
}

：何时显示旋转器，您现在可以订阅路由器的事件：

export class AppComponent implements OnInit {
  loading = true;

  constructor(private router: Router) {}

  ngOnInit() {
    this.router.events.subscribe((routerEvent: Event) => {
      this.checkRouterEvent(routerEvent);
    });
  }

  checkRouterEvent(routerEvent: Event): void {
    if (routerEvent instanceof NavigationStart) {
      this.loading = true;
    } else if (
      routerEvent instanceof NavigationEnd ||
      routerEvent instanceof NavigationCancel ||
      routerEvent instanceof NavigationError
    ) {
      this.loading = false;
    }
  }
}

这是