Angular组件中使用@typeform/embed的createWidget时，onSubmit回调访问Angular服务报TypeError错误的解决咨询

这个报错的核心原因是回调函数里的this指向发生了变化：当Typeform的onSubmit触发formFilled时，this不再指向你的OnboardComponent实例，自然就找不到_authService这些依赖了。下面给你几个简单可行的解决办法：

方法1：用箭头函数绑定上下文 #

把onSubmit的回调改成箭头函数，箭头函数会自动捕获当前组件的this：

ngAfterViewInit(): void { 
  createWidget("<<Form ID>>", { 
    enableSandbox: true, 
    container: this.formContainer.nativeElement, 
    onSubmit: () => this.formFilled(), // 这里改成箭头函数
  }); 
}

方法2：在构造函数中绑定this #

在组件构造函数里手动把formFilled的this绑定到组件实例，这样不管在哪里调用这个方法，this都指向组件：

constructor(private _userService: UserService, private _authService: AuthService) { 
  // 新增这行，绑定this
  this.formFilled = this.formFilled.bind(this);
}

ngAfterViewInit(): void { 
  createWidget("<<Form ID>>", { 
    enableSandbox: true, 
    container: this.formContainer.nativeElement, 
    onSubmit: this.formFilled, // 这里正常引用即可
  }); 
}

方法3：直接在回调内写箭头函数逻辑 #

如果这个回调逻辑不需要复用，也可以直接把代码写在onSubmit的箭头函数里，这样更直观：

ngAfterViewInit(): void { 
  createWidget("<<Form ID>>", { 
    enableSandbox: true, 
    container: this.formContainer.nativeElement, 
    onSubmit: () => {
      this._authService.currentUser$.subscribe(user => { 
        this._userService.setUserOnboarded(user); 
      });
    }, 
  }); 
}

额外小提示 #

另外，使用RxJS订阅的时候，记得添加take(1)来自动取消订阅，避免内存泄漏：

import { take } from 'rxjs/operators';

// ...
this._authService.currentUser$.pipe(take(1)).subscribe(user => { 
  this._userService.setUserOnboarded(user); 
});

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