ngOnInit() 中的 Angular 禁用/启用代码块答案

【问题标题】：Angular Disable/Enable code blocks in ngOnInit()ngOnInit() 中的 Angular 禁用/启用代码块
【发布时间】：2020-08-24 14:21:44
【问题描述】：

我正在尝试确定最佳设计模式，以最大限度地减少 REST 调用的数量，同时实现“键入时保存功能”。我会尽量让它通用。

在 ngOnInit() 中，我包括（尽可能保持通用，但不要担心函数中有 distinctUntilChanged() 以防止它向 REST 端点发送垃圾邮件）：

ngOnInit(): void {
      if (this.formIsEditable) {
            this.inputField.valueChanges.subscribe(() => //do REST);
            }
}

但是，formIsEditable 在组件初始化后被设置为 true，因此它永远不会到达此代码块内部。当这个布尔值发生变化时，Angular 有没有办法强制更新？理想情况下，当布尔值设置为 false 时，它将阻止向后端发送 PUT。如果布尔值为真，它可以向后端发送一个 PUT。

【问题讨论】：

【解决方案1】：

为什么不简单：

this.inputField.valueChanges.subscribe(() =>
     if(this.formIsEditable){  //do REST }  
 );}

别忘了取消订阅这个 observable。

【讨论】：

【解决方案2】：

您可以利用 RXJS 的 filter 运算符，来过滤 this.formIsEditable 设置为 false 时发出的值，如下所示：

this.inputField.valueChanges
  .pipe(
    filter(_ => this.formIsEditable) 
  )
  .subscribe(() => //do REST);

【讨论】：