Angular中给服务赋值元素值时如何防止无限循环调用？

• Angular默认开发模式下，每一轮变更检测周期（触发场景包括HTTP响应返回、用户交互事件、组件属性值变更、定时器回调等）都会重新执行模板中绑定的所有方法、表达式，计算最新值用于视图更新。
• 你在模板插值中直接绑定了getCount()方法，该方法每次执行都会发起新的HTTP请求，请求响应返回后会修改组件的count属性，属性变更会立刻触发下一轮变更检测，新一轮检测又会再次调用getCount()发起请求，形成完整闭环死循环，最终会占满请求资源、耗尽内存导致站点崩溃。
• 该方法本身还存在逻辑缺陷：HTTP请求是异步执行的，方法内发起订阅后会立刻执行return this.count，首次调用时返回的永远是初始值-1，等响应结果返回给count赋值时，已经过了return的执行时机，本身就拿不到正确的返回值。

核心原则：永远不要在模板绑定的方法中写会修改组件属性、发起异步请求的副作用逻辑，异步数据拉取只需要在组件初始化阶段执行一次，模板直接绑定已经赋值好的属性即可。

1. 修正组件代码（注意Angular组件文件后缀为.ts而非C#的.cs），把请求逻辑移到初始化生命周期钩子里执行：

count = -1;

constructor(
    private formBuilder: FormBuilder,
    private referralService: ReferralService
) { }

ngOnInit(): void {
  // 组件初始化时只拉取一次数据
  this.referralService
    .getAll()
    .pipe(first())
    .subscribe((response) => {
      this.count = response.data;
    });
}

2. 修正模板代码，直接绑定count属性，不再绑定方法：

<div class="alert alert-success" role="alert" style="width: 100%">
    <div class="b" style="display: flex">
        You have
        <div style="padding-left: 5px; padding-right: 5px">{{ count }}</div>
        counts right now
    </div>
</div>

额外注意事项 #

• 如果业务场景确实需要在模板中绑定方法，必须保证该方法是纯函数：相同输入永远返回相同结果，方法内部不修改任何外部状态、不发起异步请求、不触发组件属性变更，否则极易出现性能问题甚至死循环。
• Angular开发模式会额外执行一轮变更检测校验值稳定性，这类循环问题在开发环境会更早触发、表现更明显，生产环境虽然检测轮次更少，但依然会出现重复请求、性能卡顿问题。

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