angular2 utiliser sse et créer observable puis résoudre obtenir la valeur mais le composant n'a pas de résultat

Question

Le composant ne donne aucun résultat, pourquoi? créer Observable a un problème?

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

pas mon idée, juste trouvé sur un blog français, donc je suis juste traduire l'idée principale (source: https://blog.octo.com/angular-2-sse-et-la-detection-de-changements/). J'espère que cela aide.

La raison peut être que angular ne déclenche pas un rafraîchissement DOM lorsque vous enregistrez votre observable. En fait, ng n'a pas détecté de changement de DOM car la notification est effectuée depuis l'EventSource et ng n'en est pas conscient.

Pour le résoudre, vous devez invoquer observer.next() dans une course de rappel d'un 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; 

    } 
}