angular2 使用 sse 并创建 observable 然后解决获取值但组件没有结果

Question

组件没有给出结果，为什么？创建 Observable 有什么问题吗？

//service.ts
import { Injectable } from '@angular/core';
import {Http, Response} from '@angular/http';
import {Observable} from 'rxjs/Rx';
import {EventSource} from '../../../lib/EventSource';
@Injectable()
export class SitestatService {
  constructor(private http: Http) {
  }
  getSiteStatInfo(opts): Observable<any> {
      let observable =  Observable.create(observer => {
        let eventSource = new EventSource(opts.url);
        eventSource.onmessage = x => {
          observer.next(x.data);
          console.log(x.data, '=================>data');
        };
      });
    return observable;

  }
}

///////////////////////////////////////////////////

//resolve.ts
import {ActivatedRoute, Router, Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import {Observable} from 'rxjs/Rx';
import {Injectable} from '@angular/core';
import {RequestOptions, Headers} from "@angular/http";
import {SitestatService} from "./sitestat.service";
@Injectable()
export class SitestatResolve {
  constructor(private sitestatService: SitestatService) {}
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>|any {
    let opts = {
      url: 'http://127.0.0.1:3333/sitestat'
    };
    // return opts;
    return this.sitestatService.getSiteStatInfo(opts);

//component
import {Component, OnInit} from '@angular/core';
import {SitestatService} from "./sitestat.service";
import {ActivatedRoute} from "@angular/router";
import {Observable} from "rxjs/Rx";

@Component({
    selector: 'app-sitestat',
    templateUrl: './sitestat.component.html',
    styleUrls: ['./sitestat.component.scss']
})
export class SitestatComponent implements OnInit {
    public currentTime: Date = new Date();
    public siteStatInfo: Object;

    constructor(private  sitestatService: SitestatService, public route: ActivatedRoute) {
        window.setInterval(() => this.currentTime = new Date()
            , 1000);
      }

    ngOnInit() {
      console.log(this.route.snapshot.data['sitestatInfo'], '==============>siteStatInfo');
      console.log(this.route.snapshot.data, '====================SitestatComponent');
    }

}
  }
}

Answer 1

不是我的想法，只是在一个法语博客上发现的，所以我只是翻译主要想法（来源：https://blog.octo.com/angular-2-sse-et-la-detection-de-changements/）。希望对你有帮助。

原因可能是 angular 在注册您的可观察对象时不会触发 DOM 刷新。实际上，ng 没有检测到 DOM 更改，因为通知是从 EventSource 内部完成的，而 ng 并不知道它。

为了解决它，您必须在 NgZone 的回调运行中调用 observer.next()：

//service.ts
import { Injectable, NgZone } from '@angular/core';
import {Http, Response} from '@angular/http';
import {Observable} from 'rxjs/Rx';
import {EventSource} from '../../../lib/EventSource';
@Injectable()
export class SitestatService {
  constructor(private http: Http, private zone: NgZone) {
  }
  getSiteStatInfo(opts): Observable<any> {
      let observable =  Observable.create(observer => {
        let eventSource = new EventSource(opts.url);
        eventSource.onmessage = x => {
          this.zone.run(() => observer.next(x.data););
          console.log(x.data, '=================>data');
        };
      });
    return observable;

  }
}

angular2 使用 sse 并创建 observable 然后解决获取值但组件没有结果

angular2 use sse and create observable then solve get value but component has no result

angular

resolve