Question

我正在尝试在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;
    });
  }
...

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

Answer 1

您需要在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。

然后设置订阅observer.next()属性后将使用（cacheData）消耗的值。

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

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

要更仔细地看，请https://angular-2-training-book.rangle.io/handout/observables/。

Answer 2

您可以执行以下操作

   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?

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

2 个答案: