小编Dun*_*don的帖子

首先,我对ng2和打字稿很新.

我想要完成的是在Angular2组件中实现Server-Sent事件.我已经按照earlies帖子中提到的示例进行了操作,但我的问题是"EventSource"对象无法识别(在VS Code中为红色下划线).

我不确定我是否遗漏了一些参考资料......我的参考文献是:

<!-- IE required polyfills, in this exact order -->
  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
  <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
  <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="node_modules/rxjs/bundles/Rx.js"></script>
  <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

这就是我实现eventsource客户端的方式:

   ngOnInit() {
      const observable = Observable.create(observer => {
        const eventSource = new EventSource(/API_URL); //Cannot find EventSource
        eventSource.onmessage = x => observer.next(x.data);
        eventSource.onerror = x => observer.error(x);

        return () => {
            eventSource.close();
        };
    });

    observable.subscribe({
        next: guid => {
            this.zone.run(() => this.someStrings.push(guid));
        },
        error: err => console.error('something wrong occurred: ' + err)
    });

我有一个由多个组件组成的 angular2 应用程序，它在其模板中嵌入了（参数）不同的小 svg 文件。这个选择的原因是我需要与 svg 进行交互并操作 svg 文件的内部 DOM。另外我想引用一个 svg 文件，而不是在模板中的多个位置使用内联 svg，它在组件模板中更干净。

我的问题是这些 svg 文件没有被缓存在浏览器中，并且在加载包含多个组件（呈现这些 svg 文件）的页面时，我注意到在页面完成加载之前有一些小延迟。这远非最佳，如果我不能解决这个问题，我会考虑回到内联 svg。

我的目标是能够让组件模板指向一个 svg 文件，并且当这个组件第一次加载时，它不会从服务器发送，而是从浏览器缓存中检索。希望这将解决我遇到的延迟加载问题。我已经尝试在我的应用程序的根目录中定义一个 cache.manifest 文件（它定义了要缓存的不同 svgs），但是当组件加载时，服务器仍然在每次组件时发送 svgs（和 param.js）加载。！

这就是我构造一个组件模板的方式，它由 svg 符号组成，当我单击 svg 符号时，我会打开一个应包含相同符号的弹出窗口：

<div>
    <!--Header-->
    <div>{{ name }}</div>

    <!--Actual svg symbol Object-param style-->
    <div class="symbolIcon"(mouseup)="onMouseUp()" (mousedown)="onMouseDown()" >
        <object type="image/svg+xml" data="app/mySymbol.svg" >
                <param name='Activate' value={{activate}} /> 
                <param name='Status' value={{status}} /> 
        </object>
    </div>
</div>

<!--Placeholder for Popup-->
<modal-popup *ngIf="loadPopup" (command)="popupCmd($event);">
    <!--Symbol to be placed on Popup (same as in template above)-->
    <div class="modal-startstop-symbol"> …