Question

我有一项服务需要每秒返回一次日期：

bool is_shared() const {
    return !weak_from_this().expired();
}

我正在尝试订阅import { Injectable } from '@angular/core'; import {Observable} from 'rxjs/Observable'; @Injectable() export class ClockService { mydate: Date; constructor() { } getClock(): Observable<any> { setInterval(()=>{ this.mydate = new Date(); return this.mydate; }, 1000); } }函数来更新我的组件中的getClock()：

mydate

我收到错误import { Component, OnInit } from '@angular/core'; import {ClockService} from './clock.service'; @Component({ selector: 'app-header', templateUrl: './header.component.html', styleUrls: ['./header.component.scss'] }) export class HeaderComponent implements OnInit { constructor(private clockService: ClockService) { } ngOnInit() { console.log(this.clockService.getClock().subscribe(res => this.mydate = res)); } }

我是Angular 2的新手，而且文档没有帮助。

Answer 1

您应首先在服务功能上返回Observable。

getClock(): Observable<any> {
  return new Observable(observer => {
    setInterval(()=>{
      this.mydate = new Date();
      observer.next(this.mydate);
    }, 1000);
  });
}

Answer 2

没有必要使用Rx实现setInterval。

这是Observable.interval的另一个选项，它创建了一个Observable，它以指定的间隔发出一个新值，这正是你想要做的：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/map';

@Injectable()
export class ClockService {    
  getClock(): Observable<Date> {
      return Observable.interval(1000).map(() => new Date());
  }
}

See it in StackBlitz

Observable.interval()会发出一系列整数1, 2, 3, ...，您只需丢弃其值（() =>）并使用Date替换为.map()。< / p>

您可以保持HeaderComponent不变。

注意：我已将作业删除至this.mydate，因为它似乎不需要。我注意到，当纯功能解决方案足够时，许多人转向角度会产生不必要的中间成员变量。如果我过于放肆并且你需要它，你可以随时把它放回去。

你也不需要Angular中的空constructor，所以我也删除了它。

你做需要另外两个import。

Answer 3

您实际上并没有在void中返回可观察的getClock()。

请参阅https://angular.io/guide/observables

而是做这样的事情：

import { Injectable } from '@angular/core';

import {Observable} from 'rxjs/Observable';

@Injectable()
export class ClockService {

  private $timer = new Observable(obs => {
      setInterval(() => {
          obs.next(new Date());
      }, 1000);
  });

  constructor() {
  }

  getClock(): Observable<Date> {
      return this.$timer;
  }

}

从Angular 2+中的组件订阅服务

3 个答案: