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包创建不在源代码中。

运行＆＃34; npm install angular2-localStorage＆＃34;时，它会在node_module文件夹中下载软件包，但在Web部署中，该文件夹不在node_module之外。因此，网站无法找到包，因此您在浏览器中会收到错误。

我已经复制了这两个文件＆＃34; LocalStorage.ts＆＃34;和＃34; LocalStorageEmitter.ts＆＃34;并直接在我的代码中提及。

它就像一个魅力！

Answer 3

你在开发环境中使用了什么？

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

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

＆＃39; angular2-localstorage＆＃39;：＆＃39; node_modules / angular2-localstorage＆＃39;

例如：

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"
}

到你的＆＃34;包＆＃34;区域。

然后，在您的主引导程序中，您将要导入它：

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，则需要在配置文件中映射到它。有关其工作原理的信息，请is a link to the config使用SystemJS的Angular 2's official "Tour of Heroes" quick-start。

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

Answer 5

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

步骤1.安装包。

npm install angular2-cookie --save

步骤2.修改system-config.ts

中的SystemJS设置

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

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

步骤3.修改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)'
    ]
  });
};

步骤4.在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 Unhandled Promise rejection: (SystemJS) SyntaxError: Unexpected token import
        at Object.eval (http://localhost:4200/main.js:8:29)
        at eval (http://localhost:4200/main.js:27:4)
        at eval (http://localhost:4200/main.js:28:3)
    Evaluating http://localhost:4200/vendor/angular2-localstorage/LocalStorageEmitter.ts
    Evaluating http://localhost:4200/main.js
    Error loading http://localhost:4200/main.js ; Zone:  ; Task: Promise.then ; Value: Error: (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 (Not Found)

如果您添加或删除format: 'cjs'并不重要，您仍会获得404。

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

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

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

我认为此时我们无法做任何关于此软件包的事情（作为用户）。

哦，在项目的网站上。

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

如何在Angular 2 app中使用angular2-local-storage模块

5 个答案: