Angular2变更检测触发无限循环，求助原因及解决方案

这是个典型的Angular变更检测机制引发的问题，我来一步步拆解背后的原因：

核心问题：Getter被重复调用导致无限循环 #

首先看父组件里的exampleInputData$ getter——每次这个getter被访问时，都会执行以下操作：

1. 新建一个Subject<string>实例
2. 打印Log1
3. 调用exampleService.getAllData发起新的HTTP请求
4. 返回这个Subject的Observable

而Angular默认的Default变更检测模式（也就是CheckAlways）会在大量场景下触发检测：比如DOM事件触发、HTTP请求完成、定时器回调、Observable的next回调执行后等等。

无限循环的完整流程： #

1. 页面初始渲染时，Angular解析绑定[exampleInput$]="exampleInputData$"，调用getter，发起第一次HTTP请求（Log1打印）。
2. HTTP请求完成后，subscribe回调执行，打印Log2并调用subject.next(data)。
3. 子组件订阅的exampleInput$收到数据，修改parsedResponse属性。
4. 子组件的属性变化触发Angular的变更检测，而变更检测过程中，Angular会重新计算所有模板绑定的表达式——也就是再次调用父组件的exampleInputData$ getter。
5. 新的getter调用又会新建Subject、发起新的HTTP请求，请求完成后再次触发subject.next(data)，进而触发新一轮变更检测。如此往复，就形成了无限循环。

为什么修改OnPush或移除HTTP调用能终止循环？ #

1. 切换到OnPush变更检测模式 #

OnPush模式下，组件的变更检测只会在以下三种情况触发：

• 组件的@Input属性引用发生变化
• 组件自身触发了DOM事件（比如按钮点击）
• 手动调用ChangeDetectorRef.markForCheck()

当HTTP请求完成调用subject.next(data)时，子组件的parsedResponse变化属于组件内部状态变更，不会触发OnPush模式下的变更检测。因此父组件的绑定表达式不会被重新计算，getter不会被再次调用，循环自然终止。

2. 移除getAllData调用 #

此时getter虽然仍会被变更检测重复调用，但不会发起新的HTTP请求，也就不会有后续的subject.next(data)触发子组件的状态变更，不会触发新一轮变更检测，循环也就停止了。

修复建议 #

永远不要在模板绑定的getter里创建Observable或发起HTTP请求——getter会被变更检测频繁调用，导致重复创建资源和请求。正确的做法是在父组件的ngOnInit中只创建一次Observable：

exampleInputData$: Observable<any>;

ngOnInit(): void {
  const subject = new Subject<string>();
  this.exampleService.getAllData(this.id).subscribe(data => {
    console.log("Log2");
    subject.next(data);
  });
  this.exampleInputData$ = subject.asObservable();
}

然后模板中直接绑定这个属性即可：

<app-example [exampleInput$]="exampleInputData$"></app-example>

甚至可以进一步简化，直接返回exampleService.getAllData的Observable，不需要额外的Subject：

exampleInputData$: Observable<ExampleObject[]>;

ngOnInit(): void {
  this.exampleInputData$ = this.exampleService.getAllData(this.id).pipe(
    tap(() => console.log("Log2"))
  );
}

内容的提问来源于stack exchange，提问作者user351711