使用 Typescript 在服务中链接 observable 并最终在组件中订阅

Posted

技术标签:

【中文标题】使用 Typescript 在服务中链接 observable 并最终在组件中订阅【英文标题】:Chaining observable in service and subscribe in the end at component with Typescript 【发布时间】:2017-06-19 15:34:56 【问题描述】:

平台 - Angular 2 + TypeScript + angularFire2

在我的 user.service.ts 中,我有以下代码向 firebase 中的端点发出第一个请求,以查找一些路径信息。然后我想使用该路径信息执行第二次查询以查找有关用户的详细信息。

  getUserInformation(uid: string) 
    this.angularFire.database.object('/pathForUid/' + uid).subscribe(results => 
      let path = results.path;
      return this.angularFire.database.object('/uses/' + path)
    );
  

我认为这段代码有问题,因为如果我包含返回类型 FirebaseObjectObservable(这是 database.object 返回的内容),我会收到以下错误

我想要实现的是能够在我的 login.component.ts 文件中调用这个函数,如下所示。目前,当我这样做时,我的订阅上会出现一条红色下划线

类型“void”上不存在属性“订阅”

onLogin() 
    this.loading = true;
    this.userService.loginWithEmailPassword(this.loginForm.value.email, this.loginForm.value.password)
      .then(
      data => 
        this.alertService.success('Login successful', true);
        console.log('Login successful', data)

        // This is what I want to achieve
        this.userService.getUserInformation(data.uid).subscribe(result => 
          console.log(result)
        );

        //this.router.navigate(['/login']);
        this.loading = false;
      ,
      error => 
        this.alertService.error(error.message);
        console.log('Error occured', error)
        this.loading = false;
      );
  

-----更新-- 我不确定双重回报发生了什么,因为我来自 swift。一旦我添加它,我就会收到一个错误,如图所示。如果我不添加返回类型 FirebaseObjectObservable (在我在开头输入返回值后,我在订阅时收到错误消息说“订阅类型不存在属性订阅。所以在我看来,函数实际上正在返回在我可以订阅的地方订阅而不是 firebaseObjectObservable。如何更改它以便我可以订阅它?

【问题讨论】:

请将代码和错误消息作为文本而不是屏幕截图发布。额外的屏幕截图很棒,但屏幕截图不可搜索。 【参考方案1】:

你需要返回一些东西(如错误所说;-))

getUserInformation(uid: string): FirebaseObjectObservable<any> 
  return this.angularFire ... 

【讨论】:

您好,Gunter,感谢您的回复。我已经尝试了几件事。请查看我更新的问题 如果你想返回一个Observable,你不能调用subscribe(),因为subscribe()返回一个Subscription。如果你用map 替换subscribe,你应该得到你想要的。 多么神奇的功能图啊。非常感谢。会再调查一下【参考方案2】:

你应该返回getUserInformation中的方法调用,否则返回void。这显然没有subscribe 方法.. 因为它是无效的:

getUserInformation(uid: string): FirebaseObjectObservable<any> 
    return this.angularFire.database.object('/pathForUid/' + uid).subscribe(results => 
         let path = results.path;
         return this.angularFire.database.object('/uses/' + path)
    );

【讨论】:

嘿,伙计。谢谢回复。请参阅我更新的问题。我不确定双重回报发生了什么,因为我来自 swift。如果我不添加返回类型 FirebaseObjectObservable (在我在开头输入返回值之后,我在订阅时收到错误消息,说“订阅类型不存在属性订阅。所以对我来说,这似乎是函数是返回订阅而不是 firebaseObjectObservable

以上是关于使用 Typescript 在服务中链接 observable 并最终在组件中订阅的主要内容,如果未能解决你的问题,请参考以下文章

为第三方库创建 typescript .d.ts

如何在 TypeScript 中使用可选链接?

Typescript $inject $timeout into a directive ...在控制器中工作,而不是在链接中

使用 Typescript 从 Angular 6 的在线链接中显示 Pdf

Visual Studio:如何使用 IIS Express 和跨项目引用在共享项目中调试 TypeScript(无链接或复制文件)

在 typescript 或 javascript 中链接箭头函数