Question

自从我使用typescript，angular2和asp core尝试一些简单的工作以来花了大约10个小时。我将解释我到达这里的路径以及你有任何想法，我会很感激。

首先，您应该考虑我使用以下链接中的项目模板：

Template

然后我想添加一些代码来存储localStorage中的一些数据。

有些链接表明我必须访问localStorage非常简单。但是当我想从angular2的组件中访问localStorage时，我收到了这个错误：

localStorage is not defined

然后我搜索了很多解决方案并找到了以下库：

angular2-localstorage

angular-2-local-storage

angular2-local-storage

但所有这些都行不通。

然后我尝试编写服务，希望能轻松访问localStorage。然后我创建了这个文件：

/ClientApp/app/services/local-storage-service.ts

export class LocalStorageService {
    write(key: string, value: any) {
        if (value) {
            value = JSON.stringify(value);
        }
        localStorage.setItem(key, value);
    }

    read<T>(key: string): T {
        let value: string = localStorage.getItem(key);

        if (value && value != "undefined" && value != "null") {
            return <T>JSON.parse(value);
        }

        return null;
    }
}

但是当我尝试像这样导入时：

import { LocalStorageService } from 'services/local-storage-service';

我收到了这个错误：

cannot find module 'services/local-storage-service'

我已经尝试过你能想到的一切。奇怪的是，进口波纹管工作正常：

import { AppComponent } from './components/app/app.component';

该文件位于'/ClientApp/app/app.component.ts'，但当我将该文件复制到'/services/app.component.ts'时，会发生同样的错误。

我对如何询问有关此问题的问题不够了解。但我会尝试你的任何想法。

**** UPDATE 这是目录树：

虽然在app.modules.ts文件中我可以像这样访问它：

import { LocalStorageService } from './services/local-storage.service';

没有错误。但在文件settoken.component.ts它会导致错误。

*** REUPDATE

现在使用正确的路径我有服务注入。但它说localStorage没有定义！服务代码是建议的。

import { Injectable } from '@angular/core';

@Injectable()
export class LocalStorageService {
    private storage: any;

    constructor() {
        this.storage = localStorage;
    }

    public retrieve(key: string): any {
        var item = this.storage.getItem(key);

        if (item !== null && item !== 'undefined') {
            return JSON.parse(this.storage.getItem(key));
        }

        return;
    }

    public store(key: string, value: any) {
        this.storage.setItem(key, JSON.stringify(value));
    }

}

和错误：

Exception: Call to Node module failed with error: Error: Uncaught (in promise): ReferenceError: localStorage is not defined
ReferenceError: localStorage is not defined

TG

Answer 1

对于非模块文件，您将不得不使用相对路径;例如，./，../。您没有说文件在哪里尝试导入与服务相关的服务。假设它位于父目录中，路径将为./services/local-storage-service。

如果您仍然遇到问题，可以尝试使用本地存储服务。

import { Injectable } from '@angular/core';

@Injectable()
export class LocalStoragePersistence {
    private storage:any;

    constructor() {
        this.storage = localStorage;
    }

    public retrieve(key:string):any {
        var item = this.storage.getItem(key);

        if (item !== null && item !== 'undefined') {
            return JSON.parse(this.storage.getItem(key));
        }

        return;
    }

    public store(key:string, value:any) {
        this.storage.setItem(key, JSON.stringify(value));
    }

}

使用

将其导入您的组件

import { LocalStoragePersistence } from './services/local-storage.service';

确保您记得在提供商数组中声明它：providers: [ LocalStoragePersistence ]

请注意将文件重命名为local-storage.service.ts的建议。这是文件的Angular 2命名模式（feature.type.ts）。希望这会有所帮助。

TypeScript无法找到模块过于频繁

1 个答案: