Angular 6 - 无法订阅从服务返回的数据

Posted 2023-03-13

【中文标题】Angular 6 - 无法订阅从服务返回的数据

【英文标题】：Angular 6 - unable to subscribe to data returned from a service

【发布时间】：2019-05-27 05:51:00

【问题描述】：

我正在尝试在 Angular 中构建一个简单的缓存服务；具有简单的 setter/getter 函数的服务，不同的组件可以从中获取数据。

不幸的是，当订阅此服务以获取数据时，订阅回调永远不会被调用，也不会检索到数据。

catch-service.service.js

import  Injectable  from '@angular/core';
import  Observable, from  from 'rxjs';

@Injectable(
  providedIn: 'root'
)
export class CacheService 

  cacheData: Observable<any>;

  constructor()  

  setCacheData(data) 
    this.cacheData = new Observable(data)
  

  getCacheData() :Observable<any> 
    return from(this.cacheData);
  

component.component.js

...
export class SomeComponent 

  constructor(private cacheService: CacheService)  

  data = null;

  ngOnInit() 
    this.cacheService.getCacheData().subscribe(resp => 
      console.log(resp);
      this.data = resp;
    );
  
...

我已经在模块类中注入了服务，没有编译错误。组件中的数据永远不会设置。

【参考方案1】：

您可以执行以下操作

   export class CacheService 

     //create a method to set and get the cache 
     cacheData: Observable<any>
     setCache: (cachedata: any) 
          var newObservable = new Observable(observer => 
            observer.next(cachedata);
            observer.complete();
          );
          this.cacheData=newObservable;

    
    getCacheData() :Observable<any>
        return this.cacheData;
    

在您的组件上，您可以像下面这样订阅。

service.getCacheData().susbcribe((data)=>
    //here you will get
);

您还可以查看以下答案如何观察到工作

How create observable with parameters in Angular 6?

【参考方案2】：

您需要在cacheData中提供数据。

以此为例。

import  Component, OnInit  from '@angular/core';
import  Observable  from 'rxjs'

@Component(
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
)
export class AppComponent implements OnInit 

  cacheData: Observable<any> = new Observable(observer => 
    observer.next(1)
    observer.next(2)
    observer.next(3)
    observer.next(4)
  )

  ngOnInit() 
    this.cacheData.subscribe(
      (data) => 
        console.log(data)
      
    )
  

在那里，您从ngrx 库中创建一个新的Observable，它带有angular。

然后在订阅cacheData 属性后设置您要使用的值（使用observer.next()）。

observer.next() 可以作为参数接收。

布尔值 号码 字符串 功能 对象 数组 空 未定义

如需进一步了解，请https://angular-2-training-book.rangle.io/handout/observables/。

【讨论】：

我将如何继续在此服务中创建设置器函数？我无法将数据硬编码到服务器中

你可以做我指定的，以确保前端没有问题。然后继续进行后端。

哦，我看到nvm了

谢谢，我只是不知道如何申请 .next 作为二传手。 Code-EZ 帮助我理解