主页 / coding / 问题 / 79586063
Accepted
derstauner
Asked: 2025-04-22 17:08:46 +0800 CST

尽管设置正确，但仍出现“检查后表达式已更改”错误

  • 772

我遇到了这个错误expression has changed after it was checked。我知道这个检查只在开发模式下运行（运行两次），并且在生产模式下不会出现这个错误信息。但我想知道为什么会这样。

我有一个基于信号的加载器服务，如下所示：

import { Injectable, signal } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class LoaderService {
  private _isLoading = signal<boolean>(false);

  get isLoading(): boolean {
    return this._isLoading();
  }

  show() {
    this._isLoading.update(() => true);
  }

  hide() {
    this._isLoading.update(() => false);
  }
}

我也有这个拦截器：

import {
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpRequest,
  HttpResponse,
} from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, catchError, map, throwError } from 'rxjs';
import { USE_LOADING_SPINNER } from '../constants/app.constants';
import { LoaderService } from '../../shared/services/loader.service';

@Injectable()
export class LoadingInterceptor implements HttpInterceptor {
  constructor(private loaderService: LoaderService) {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    if (req.context.get(USE_LOADING_SPINNER)) this.loaderService.show();

    return next.handle(req).pipe(
      map((event: HttpEvent<any>) => {
        if (event instanceof HttpResponse) this.loaderService.hide();
        return event;
      }),
      catchError((error) => {
        this.loaderService.hide();
        return throwError(() => error);
      })
    );
  }
}

始终设置USE_LOADING_SPINNER为 true，这意味着我只需标记那些我不想有任何加载指示器的请求。

由于LoaderService是基于信号的，因此我effect在组件的构造函数中注册了一个，如下所示：

constructor() {
    effect(() => {
      this.loading = this.loaderService.isLoading;
    });
  }

请注意，该loading变量不是信号，而是一个纯布尔变量，因为该isLoading方法返回布尔值，而不是信号。

在模板中，我在网格组件中有这个：

[loading]="loading"

此设置正在运行，初始路由时会显示加载指示器。

现在我向组件添加一个刷新方法，如下所示：

refresh() {
    //this.loaderService.show();
    this.gridData$ = this.userService.getUsers();
    //.pipe(tap(() => this.loaderService.hide()));
  }

但是，如果我点击刷新，主题标题就会报错，而且加载指示器也没有显示。拦截器被触发了，我检查了一下。

但如果我取消注释对它的调用，loaderService它就会按预期工作。

为什么我会收到这个错误？

angular

2 个回答

  1. 我希望您能理解在通常的“错误设置”情况下该错误的含义。

    就你的情况而言，你很可能有一个标记

      [loading]="loading" // change detection checks values from top to bottom. 
  // loading value is checked here and the value is false

  // later in the template, or somewhere in children
  [data]="gridData$ | async" // during execution of THIS LINE http request fires, 
 // interceptor code is executed, loading is set to true, which obviously causes that error.

    要解决这个问题，你应该将代码转换为在事件处理期间执行 http 调用，而不是在模板执行期间。例如通过 rxjs

    private refresh$ = Subject<void>();
gridData$ = this.refresh$.pipe(
  startWith(undefined), 
  exhaustMap(() => this.userService.getUsers())
);

refresh() {
  this.refresh$.next(); // this way http call will happen during this line execution
}
    • 1
  2. Best Answer

    我认为错误可能是由于视图初始化后expression has changed after it was checked更新造成的。建议尝试基于信号的更新，这样可能根本不会触发此错误。loading

    我认为这是由于getter和的使用不当造成的signal，而不是在服务级别执行信号，而是返回实际的信号。

    当您想对之前的状态执行某些操作时，请使用update，否则设置是更好的选择。

    您的信号是私有的，您只想返回信号的只读版本，因此我们使用它asReadonly()来删除可写操作set以及update组件何时使用此信号。

    import { Injectable, signal } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class LoaderService {
  private _isLoading = signal<boolean>(false);

  get isLoading(): boolean {
    return this._isLoading.asReadonly(); // prevent modification of the signal
  }

  show() {
    this._isLoading.set(true);
  }

  hide() {
    this._isLoading.set(false);
  }
}

    现在，在组件级别，effect只需将服务属性分配给组件属性，而不是过度杀伤。

    // or
// loading = this.loaderService.isLoading;

constructor() {
  this.loading = this.loaderService.isLoading;
}

    在模板级别，执行信号。

    [loading]="loading()"
    • -1

相关问题