我如何订阅函数中的 Observables答案

【问题标题】：How can i subscribe to an Observables in a function我如何订阅函数中的 Observables
【发布时间】：2021-07-23 03:21:19
【问题描述】：

我的 Angular 应用程序中有一个函数，当用户在文本框中输入一些数据以根据 API 验证数据时调用该函数。除了对 API 的调用导致我出现问题外，我的工作正常。在我的旧代码中，我使用了 Promise，效果很好，但我正试图转向 observable，这导致了我的问题。

这是我正在调用的服务的代码..

  validateUsername(username: string): Observable<IAPIResponse> {
    const requestUrl = `/user/validateUserName/${username}`;
    return this.httpservice.get<IAPIResponse>({
      endpoint: this.baseUrl + requestUrl,
      params: {}, })
      .pipe(
        map(result => result as IAPIResponse),
        tap(result => console.log(result.Data))
   );

我的函数看起来像这样..

userNameAvail?: Observable<any>;

  validateUsername(event: any){

    console.log('New Username : ' + event.target.value);
    this.userNameAvail = this.userservice.validateUsername(event.target.value);
    console.log(this.userNameAvail);
  })

所以我的问题是我缺少什么才能正确订阅该 observable 并访问我的函数中的数据。

【问题讨论】：

标签： angular

【解决方案1】：

 private subscriptionValidateUserName : Subscription;      

 validate(event: any){

    console.log('New Username : ' + event.target.value);
    this.subscriptionValidateUserName = this.userservice.validateUsername(event.target.value).subscribe( data -> {
     console.log(data);
    });;
  })

订阅后你不能持有 Observable。

您可以持有的是订阅，如果您不想稍后被意外触发，当您完成某项操作时取消订阅很重要。如果您想取消订阅，只需执行this.subscriptionValidateUserName.unsubscribe();

【讨论】：

当我这样做时，我又回到了使用已弃用的订阅。 subscribe 已弃用：使用观察者而不是完整的回调（弃用）。我也无法分配我的 userNameAvail?: Observable 可观察的通过订阅，因为我收到此错误类型“订阅”缺少来自类型“Observable”的以下属性：_isScalar、源、运算符、提升和还有 6 个。
@SamS87 您的第二种方法与第一种方法同名。更改它以验证它应该在您现在调用 this.validate('name') 时工作

【解决方案2】：

observable 在调用 subscibe 之前永远不会执行。但退订它很重要。订阅和取消订阅任何 rxjs observable 的更好解决方案是：创建 BaseComponent ，在其中声明 varibale _destory 类型为主题。然后在 ngOnDestroy() 中调用。之后从这个 BaseComponent 继承任何组件。有了这个概念，您可以轻松地取消订阅 observable。

@Directive()
export class BaseComponent implements OnDestory{
   private _destroy=new Subject();
   ngOnDestroy(){
     this._destroy.next();
   }
}

export class SomeComponent extends BaseComponent{
  validateUsername(event: any){   
 this.userservice.validateUsername(event.target.value)
 .pipe(
       takeUntil(this._destroy))
 .subscribe(result=>
    console.log(result);
  })
}

【讨论】：