Angular 通用使用全局浏览器对象，如 window 和本地存储

Question

我相当大的 Angular 通用应用程序需要使用本地存储和 window 对象。 Node.js 不使用这些对象，我收到 window 或 localstorage 未定义的引用错误。

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

有什么我可以写的东西可以遍历节点服务器或客户端上的整个项目吗？

Answer 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);
        }
    }

}

Angular 通用使用全局浏览器对象，如 window 和本地存储

Angular Universal using global browser objects like window and localstorage

node.js

angular-universal

angular