如何在 Angular 2 应用程序中使用 angular2-local-storage 模块

Question

如何在 Angular 2 中使用这个模块？有什么例子吗？

到目前为止，我安装了模块并导入了 Angular 2 组件。

https://www.npmjs.com/package/angular2-local-storage

Answer 1

导入并添加到bootstrap()

bootstrap(AppComponent, [OtherProvider, LocalStorage]);

将其注入到您要使用它的组件、指令或服务中。

export class SomeComponent {
  constructor(private ls:LocalStorage) {}
  clickHandler() {
    this.ls.set('someKey', 'someValue');
  }
  otherClickHandler() {
    console.log(this.ls.get('someKey'); // should print 'someValue'
  }
}

Answer 2

我遇到了同样的问题，在调试代码后我找到了解决方案。

问题在于源代码中没有创建 npm 包。

当您运行“npm install angular2-localStorage”时，它会将包下载到 node_module 文件夹中，但在 Web 部署中，该文件夹位于 node_module 之外。 因此，网站找不到包，因此您在浏览器中遇到错误。

我已经复制了这两个文件“LocalStorage.ts”和“LocalStorageEmitter.ts”并在我的代码中直接引用。

它就像一个魅力！

Answer 3

您的开发环境使用什么？

如果您像 angular2 教程一样使用 SystemJS，则需要将以下内容添加到您的 systemjs.conf.js 文件中：

在您需要添加的地图区域中：

'angular2-localstorage': 'node_modules/angular2-localstorage'

例如：

var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs',
    'angular2-localstorage':      'node_modules/angular2-localstorage'
  };

根据您的设置，您可能还需要添加：

'angular2-localstorage': {
    defaultExtension: "js"
}

到您的“包裹”区域。

然后，您需要在主引导加载程序中导入它：

import {LocalStorageService, LocalStorageSubscriber} from 'angular2-localstorage/LocalStorageEmitter';

并更新引导加载程序并订阅：

例如：

var appPromise = bootstrap(myapp, [ROUTER_PROVIDERS, LocalStorageService]);
LocalStorageSubscriber(appPromise);

然后...要实际使用它，您将在一个类中执行类似的操作：

导入：

import {LocalStorage, SessionStorage} from "angular2-localstorage/WebStorage";

然后，在班级内：

@LocalStorage() public foo:string = ''; // this will initialize to empty string, you might want something different.
this.foo = this.foo + "Changed";  //foo variable and '/foo' localstorage entry will change any time the variable changes. *note, but not the other way around

Answer 4

这取决于您的开发人员。环境，特别是用于编译打字稿的工具。如果您使用的是 SystemJS，则需要在配置文件中映射到它。有关其工作原理的信息，请查看使用 SystemJS 的 Angular 2's official "Tour of Heroes" quick-start 中的 is a link to the config。

map: {
    'angular2-localstorage': 'node_modules/angular2-localstorage'
}

Answer 5

这个库似乎有一个错误。我正在使用angular-cli 生成一个Angular 2 应用程序。作为健全性检查，我尝试了 angular2-cookie 包。请注意，有关如何在 Angular 2 中安装和使用此软件包的说明已过时。

步骤 1. 安装包。

npm install angular2-cookie --save

第二步，修改system-config.ts中的SystemJS设置

const map: any = {
 'angular2-cookie': 'vendor/angular2-cookie'
}

const packages: any = {
 'angular2-cookie' : {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'core.js'
  }
}

第三步，修改angular-cli构建脚本angular-cli-build.js

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)'
      'angular2-cookie/**/*.+(ts|js|js.map)'
    ]
  });
};

第四步，在main.ts提供服务

import { CookieService } from 'angular2-cookie/core';
...
bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  CookieService
])
.catch( (err:any) => console.error(err));

第 5 步。您可以使用 ng serve 加载您的应用程序，但在上述 4 个步骤之后，您必须将其杀死（例如 ctrl-c）并重新启动它 ng serve。

现在，如果你用angular2-localstorage 重复这 5 个步骤，它将不起作用。

步骤 1. 安装

npm install --save angular2-localstorage

第 2 步。system-config.ts

const map: any = {
  'angular2-cookie': 'vendor/angular2-cookie',
  'angular2-localstorage': 'vendor/angular2-localstorage'
};

/** User packages configuration. */
const packages: any = {
  'angular2-localstorage': {
    format: 'cjs',
    defaultExtension: 'ts'
  },
  'angular2-cookie' : {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'core.js'
  }
}

第 3 步。angular-cli-build.js

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)'
      'angular2-cookie/**/*.+(ts|js|js.map)',
      'angular2-localstorage/**/*.+(ts|js|js.map)'
    ]
  });
};

第 4 步。main.ts

import { CookieService } from 'angular2-cookie/core';
import { LocalStorageService } from 'angular2-localstorage/LocalStorageEmitter';
...
bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  CookieService,
  LocalStorageService
])
.catch( (err:any) => console.error(err));

第 5 步。杀死并重新启动 ng-serve

您将观察到类似以下的情况。

zone.js:461 未处理的承诺拒绝：（SystemJS）语法错误：意外的令牌导入 在 Object.eval (http://localhost:4200/main.js:8:29) 在 eval (http://localhost:4200/main.js:27:4) 在 eval (http://localhost:4200/main.js:28:3) 评估 http://localhost:4200/vendor/angular2-localstorage/LocalStorageEmitter.ts 评估 http://localhost:4200/main.js 加载 http://localhost:4200/main.js 时出错；区：;任务：Promise.then ；值：错误：(SystemJS) SyntaxError: Unexpected token import(...)

如果您尝试更改 system-config.ts 作为用户之一，如下所示。

'angular2-localstorage': {
    defaultExtension: "js"
}

然后，您将看到以下内容。

zone.js:101 GET http://localhost:4200/vendor/angular2-localstorage/LocalStorageEmitter.js 404（未找到）

不管你添加或删除format: 'cjs'，你仍然会得到一个404。

当然，一个区别是angular2-cookie写成JavaScript，而angular2-localstorage写成TypeScript。但是，这些想法应该是相同的。

在我看来，控制台抱怨import 声明。

This ticket 建议您需要构建包（因为 npm 存在错误），但用户仍然说即使这样也不起作用。

我认为目前我们（作为用户）对此包无能为力。

哦，在项目的网站上。

此项目未维护。请考虑接管它。更多信息请访问https://github.com/open-source-chest/take-it-over。