在 Angular 中检测属性组件内部变化

Question

我正在了解有关 Angular 的更多信息，并且在更改属性后我正在尝试运行一种方法。这是我的代码

isLoading = false;

ngOnInit() {
    this.isLoading = true;
    this._myService.getContent().subscribe(
        (response: IContent) => {
            this.isLoading = false;
            this.doSomething();
            // console.log(response);
        },
        err => {
            this.isLoading = false;
            this.doSomething();
            console.log(err);
        }
    );
}

doSomething() {
     console.log('some thing')
}

我想在 isLoading 设置为 false 后执行 doSomething()（比如在设置后放置 .then(() => {this.doSomething()})）。我知道我可以把 doSomething() 超时，比如

setTimeout(() => this.doSomething(),10);

这会奏效，但我认为还有更好的方法。我搜索了解决方案并找到了关于 ChangeDetectorRef 的信息，我不确定如何在这种情况下实施它。也可能有一种我不熟悉的不同方法。

Answer 1

在您的情况下，doSomething 应该在 Observable 完成后调用。您可以为此使用 finalize 管道：

isLoading = false;

ngOnInit() {
  this.isLoading = true;

  this._myService.getContent().pipe(
    finalize(() => {
      this.isLoading = false;
      this.doSomething();
    })
  ).subscribe({
    next: (response: IContent) => console.log(response),
    error: (error: any) => console.log(err)
  });
}

doSomething() {
     console.log('some thing')
}

如果您 - 总是 - 想要运行 doSomething() 将 this.isLoading 设置为 false。您可以使用 getter/setter:

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

set isLoading(loading: boolean) {
  this._isLoading = loading;

  if (loading) {
    this.doSomething();
  }
}

private _isLoading: boolean;

或者您可以在 class:

中使用一个额外的方法

setLoading(loading: boolean): void {
  this.loading = loading;

  if (loading) {
    this.doSomething();
  }
}

虽然最后两个选项不受欢迎，因为函数不再是纯粹的，因为它们很可能会引入副作用

Answer 2

请尝试在您的组件中实现 onPush 或 ChangeDetectionStrategy

这样做将指示 Angular 运行仅在将新引用传递给这些组件及其子树时对这些组件及其子树进行更改检测，而不是仅在数据发生变化时。

运行 this.ref.markForCheck() 或 this.ref.detectChanges() 当您更新变量（或做某事）并希望它反映在 html

中时

请查看以下链接以获取更多信息

https://angular.io/api/core/ChangeDetectionStrategy

https://alligator.io/angular/change-detection-strategy/

在 Angular 中检测属性组件内部变化

Detect property change inside component in Angular

typescript

angular

angular-changedetection

在 Angular 中检测 属性 组件内部变化

Detect property change inside component in Angular

typescript

angular

angular-changedetection

在 Angular 中检测属性组件内部变化