时间戳

首页 > 解决方案 > Angular 10 - 服务器发送事件 - 缺少事件源

angular - Angular 10 - 服务器发送事件 - 缺少事件源

问题描述

我正在使用 Angular 10 并尝试从 node.js REST 服务器监听服务器发送的事件。我是 Angular 的菜鸟（这是一个学校项目。）无论如何，我发现的所有教程都创建了一个服务，该服务实现了 EventSource 并在收到块时订阅它们。一切都可以编译，但是当我浏览到使用该服务的页面时，我收到此错误“NullInjectorError: No provider for EventSource”。任何人都可以提供可能帮助或告诉我需要做什么来克服错误的参考吗？

需要明确的是，我不是在创建新的 EventSource 类，而是使用我理解的 JavaScript 内置类（https://developer.mozilla.org/en-US/docs/Web/API/EventSource）。

删除“私有_eventSource：EventSource”解决了这个问题，这引发了另一个问题（我想我可能偶然发现了我的答案。）是不是不能声明像EventSource这样的内置JavaScript类型的变量？

这是我的代码...

import { Injectable, NgZone } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { Facility } from '../models/facility.model'
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MyClass {

  constructor( 
    private _http: HttpClient,
    private _zone: NgZone,
    private _eventSource: EventSource   // removing this resolved the error
  ) { }


  getMyEventSourceStream() {

    return new Observable((observer) => {
      const eventSource = new EventSource(this._summaryUrl);

      eventSource.onopen = (event) => {
        console.log(event);
      }

      eventSource.onmessage = (event) => {
        console.log(event);
        this._zone.run(() => {
          observer.next(event);
        })
      };

      eventSource.onerror = (error) => {
        this._zone.run(() => {
          observer.error(error);
        })
      }
    });
  }
}

标签： angularprovidereventsource

解决方案

如果我们可以看到一些代码片段但查看错误会更容易提供帮助

NullInjectorError：没有事件源的提供者

Angular 依赖注入文档中缺少一些依赖项，这可能意味着您在代码中的某个位置创建了类似的服务类 export class EventSource { ... }，然后在另一个尝试在构造函数中提供它

class AnotherClass{
  constructor(private myEventSource: EventSource)
}

但要使其正常工作，您需要让 DI 了解您的新课程文档，这可以通过添加注释来完成

@Injectable({
  providedIn: 'root',
})
export class EventSource {
    ...
}

另一种可能性是您想使用已经可用的 javascript 类EventSource 文档，而不是将其传递给构造函数，而是尝试在构造函数中简单地创建它

class AnotherClass{
  private myEventSource
  constructor(){
    this.myEventSource = new EventSource(..)
  }
}

如果这是问题所在，您以后也可以在 Angular DI 中提供它，这被提议作为潜在的快速修复。

推荐阅读