如何 运行 Angular 中 ngAfterViewChecked 生命周期钩子中的一次性方法

Question

我有一个需要跟踪的变量更改，我想 运行 在发生此类更改后使用一些功能。所以，我正在使用 ngAfterViewChecked 挂钩 运行 函数。但是，这种方法是一种数据提交。所以，它只需要运行一次所以，我使用了一个状态布尔变量来处理这个，如下所示。

    ngAfterViewChecked() 
    {
        //status is a boolean variable which is true
        if (this.status)
        {
           this.status=!this.status;
           this.myFunction();
        }
    }
    myFunction
    {
        //some code
    }

但是，我在这种方法中检测到多个数据提交（在检查数据库后验证）并且我也收到以下错误。

ERROR 错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。 “@dialogContainer”的先前值：'enter'。当前值：'exit'.

据我所知，每次 change.So 都会触发 ngAfterViewChecked 我的猜测是，在将状态更改为 false 之前，另一个实例已执行 if (this.status) {} 之前更改为 false。

有办法解决这个问题吗？

Answer 1

经过几个小时的搜索，我能够克服 it.This 我是如何做到的 it.I 将从对我的解决方案的一些解释开始。

• Angular 在浏览器中工作。浏览器 运行 JavaScript.Javascript 代码在单线程中执行，但 Javascript 运行 时间不是 运行 在单线程中执行。我们不必担心，因为运行时会处理它。
• 主题是可观察的。它可用于向正在收听它的任意数量的观察者发出一个值
• 订阅可以持有一个 observable

首先，我创建了一个名为 paymentListener 的主题、一个名为 counter 的整数变量和一个名为 oneTimePayment 的订阅。

oneTimePayment: Subscription;
  private paymentListener = new Subject<number>();
  counter = 0;

然后在 onInit 方法中，我进行了订阅。

 ngOnInit() {
    
    this.oneTimePayment = this.paymentListener.subscribe((counter) => {
          if (counter == 1) {
            //this is my function
            this.myFunction();
          }
        });
    
    }

然后在 ngAfterViewChecked 生命周期挂钩中，我使用 paymentListener（这是一个 Subject）来发出计数器值。

 ngAfterViewChecked() {
    if (this.counter == 0) {
      this.counter++;
      if (this.counter == 1) {
        this.paymentListener.next(this.counter);
      }
    }
  }

因为，只有当计数器等于 1 时，paymentListener (Subject) 才会发出该值。因此，在 onInt 内部进行的订阅将获得发出的值，并且我只执行 myFunction()如果发出的值等于 1； 这确保该方法在更改后仅 运行ning 一次。

最后，确保在ngOnDestroy中调用取消订阅。否则会导致内存泄漏。

 ngOnDestroy() {
    this.oneTimePayment.unsubscribe();
  }