angular2 использовать sse и создать наблюдаемый, затем решить получить значение, но компонент не имеет результата

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/). Надеюсь, поможет.

Причина может заключаться в том, что угловое значение не вызывает обновление DOM при регистрации наблюдаемого. На самом деле, ng не обнаружил изменения DOM, поскольку уведомление выполняется из EventSource, и ng не знает об этом.

Для того, чтобы решить эту проблему, вы должны вызвать observer.next() внутри обратного вызова бежать из NgZone:

//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; 

    } 
}