在订阅方法 ANGULAR 中执行 GUI 方法操作

Posted 2023-03-13

【中文标题】在订阅方法 ANGULAR 中执行 GUI 方法操作

【英文标题】：Perform GUI method action inside of the subscribe method ANGULAR

【发布时间】：2020-08-28 11:58:43

【问题描述】：

我有一个显示为模态的组件（出现在我网站上的任何内容上方），该组件用作注册组件。它内部有一个注册表单，并将数据提交给服务。关于提交数据的一切工作，一切都成功地存储在我的数据库中。

但是当我想关闭我的模式时，问题就出现了。我尝试在订阅方法的第三个回调中执行关闭模式的方法：

this.userService.store(this.user).subscribe(
      () => 
        // Inform the user
        this.success = 'Created successfully';

        // Reset the form
        this.registerForm.reset();
      ,
      (err) => (this.error = err),
      () => 
        // Close the register form
        document.getElementById('closeButton').click(); <- FUNCTION WHICH PERFORMS THE CLOSE GUI METHOD
      
    );

我也尝试在订阅方法的第一个回调中调用该方法：

this.userService.store(this.user).subscribe(
      () => 
        // Inform the user
        this.success = 'Created successfully';

        // Reset the form
        this.registerForm.reset();

        // Close the register form
        document.getElementById('closeButton').click(); <- FUNCTION WHICH PERFORMS THE CLOSE GUI METHOD
      ,
      (err) => (this.error = err)
    );

这些都不起作用，我可以在订阅函数之外调用此方法，但我只想在来自服务器的响应成功时关闭此组件。

【参考方案1】：

您始终可以使用finalize 运算符。在 http 订阅的情况下，它总是在最后执行（模拟来自 try-catch 的 finally 块）

this.userService.store(this.user)
.pipe(
   finalize(()=>closeYourModal())
).subscribe(...usualStuff)

我总是用它来做最后的事情（例如将inProgress标志设置为false）

【参考方案2】：

解决了。

这个函数没有问题，也没有在订阅方法中调用这个函数。服务组件内部发生的错误阻止了此方法的执行。解决该错误解决了我的问题。