Angular Universal 使用全局浏览器对象，如 window 和 localstorage答案

【问题标题】：Angular Universal using global browser objects like window and localstorageAngular Universal 使用全局浏览器对象，如 window 和 localstorage
【发布时间】：2019-09-11 22:45:14
【问题描述】：

我相当大的 Angular Universal 应用程序需要使用本地存储和窗口对象。 Node.js 不使用这些对象，我得到一个引用错误，即 window 或 localstorage is not defined。

我知道我可以使用 IsPlatformBrowser 模块，但我必须在整个应用程序（几百个地方）和未来使用中添加条件状态。

有没有什么我可以写的东西在节点服务器或客户端上覆盖整个项目？

【问题讨论】：

您可以将本地存储包装在一个检查IsPlatformBrowser的函数中
喜欢服务？您是说用服务中的函数替换所有本地存储、窗口对象吗？
是的，将它们作为函数包装在服务中，并在函数中添加IsPlatformBrowser
万能不能执行任何有window或localstorage的代码，否则会报错
你可能需要重构，或者你可以在github上使用一些有角度的本地存储库

标签： node.js angular angular-universal

【解决方案1】：

我最终为全局对象制作了一个文件。在文件中，我有两个服务，我使用LocalStorageService 和WindowService。我不得不重构相当多的代码，但我找不到更好的解决方案。现在可以与 Angular Universal 完美配合。

幸运的是localStorage 是一个简单的浏览器 api，只有 5 个函数和一个属性，所以我可以把整个事情写出来。然而window 有几十个函数和属性，这意味着我必须在WindowService 中编写函数，然后才能在其他地方使用它。

它相当不雅，但它有效。

这是我的全局对象文件：

  import { Injectable, OnInit, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Injectable({providedIn: 'root'})



export class LocalStorageService {
    constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

    clear() {
        if (isPlatformBrowser(this.platformId)) {
            localStorage.clear();
        }
    }

    setItem(key: string, value: string) {
        if (isPlatformBrowser(this.platformId)) {
            localStorage.setItem(key, value);
        }
    }

    getItem(key: string) {
        if (isPlatformBrowser(this.platformId)) {
           return localStorage.getItem(key);
        }
    }

    removeItem(key: string) {
        if (isPlatformBrowser(this.platformId)) {
            localStorage.removeItem(key);
        }
    }

    key(index: number) {
        if (isPlatformBrowser(this.platformId)) {
            return localStorage.key(index);
        }
    }

    length() {
        if (isPlatformBrowser(this.platformId)) {
            return localStorage.length;
        }
    }


}

export class WindowService {
    constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

    scrollTo(x: number , y: number) {
        if (isPlatformBrowser(this.platformId)) {
         window.scrollTo(x, y);
        }
    }    

    open(url?: string, target?: string, feature?: string, replace?: boolean) {
        if (isPlatformBrowser(this.platformId)) {
        window.open(url, target, feature, replace);
        }
    }

}

【讨论】：