Comment utiliser le module angular2-local-storage dans l'application Angular 2

De l'importation et de l'ajouter à bootstrap()

bootstrap(AppComponent, [OtherProvider, LocalStorage]);

L'injecter dans le composant, d'une directive ou d'un service où vous souhaitez l'utiliser.

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

Ce qu'utilisez-vous pour votre projet de développement de l'environnement?

Si vous utilisez SystemJS comme le angular2 tutoriels, vous aurez besoin d'ajouter les éléments suivants à votre systemjs.conf.js fichier:

dans la zone de la carte, vous aurez besoin d'ajouter:

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

Par exemple:

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'
  };

Selon votre configuration, vous pouvez aussi avoir besoin d'ajouter:

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

à votre "packages".

Ensuite, dans votre chargeur de démarrage, vous aurez envie de les importer:

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

Et de mettre à jour le bootloader et abonnez-vous:

par exemple:

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

... À l'utiliser, vous allez faire quelque chose comme cela au sein d'une classe:

Importer:

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

Puis, au sein de la classe:

@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

Il semble y avoir un bug avec cette bibliothèque. Je suis l'aide de la angulaires-cli pour générer Angulaire 2 de la demande. Comme un test de cohérence, j'ai essayé le angular2-cookie paquet. Notez que les instructions sur la façon d'installer et d'utiliser ce package Angulaire 2 est obsolète.

L'étape 1. Installer le package.

npm install angular2-cookie --save

L'étape 2. modifier SystemJS paramètres dans system-config.ts

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

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

L'étape 3. modifier la angulaires-cli script de construction 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)'
    ]
  });
};

L'étape 4. Fournir le service dans main.ts

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

L'étape 5. Vous pouvez charger votre application avec ng servemais après les 4 étapes ci-dessus, vous devrez le tuer (par exemple, ctrl-c) et de le redémarrer ng serve.

Maintenant, si vous répétez ces 5 étapes avec angular2-localstorageil ne fonctionnera PAS.

L'étape 1. installer

npm install --save angular2-localstorage

L'étape 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'
  }
}

L'étape 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)'
    ]
  });
};

L'étape 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));

L'étape 5. arrêter et redémarrer ng-serve

Vous observez quelque chose comme ce qui suit.

de la zone.js:461 non Gérée Promesse de rejet: (SystemJS) SyntaxError: Unexpected token d'importation 
à l'Objet.eval (http://localhost:4200/main.js:8:29) 
à eval (http://localhost:4200/main.js:27:4) 
à eval (http://localhost:4200/main.js:28:3) 
L'évaluation de http://localhost:4200/vendor/angular2-localstorage/LocalStorageEmitter.ts 
L'évaluation de http://localhost:4200/main.js 
Erreur de chargement http://localhost:4200/main.js ; Zone: ; la Tâche: la Promesse.ensuite ; Valeur: Erreur: (SystemJS) SyntaxError: Unexpected token import(...) 

Si vous essayez de changer system-config.ts comme l'un des utilisateurs conseillé comme suit.

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

Ensuite, vous verrez la suite.

de la zone.js:101 OBTENIR http://localhost:4200/vendor/angular2-localstorage/LocalStorageEmitter.js 404 (Non Trouvé) 

Il n'a pas d'importance si vous ajoutez ou supprimez des format: 'cjs'vous obtiendrez toujours une erreur 404.

Bien sûr, une différence est que angular2-cookie est écrit dans JavaScript et angular2-localstorage est écrit dans TypeScript. Mais encore, les idées devraient être les mêmes.

Il me semble que la console se plaint de la import déclaration.

Ce billet suggérer vous avez besoin pour construire le paquet (car il y a un bug avec npm), mais l'utilisateur a toujours dit que même cela ne fonctionne pas.

Je ne pense pas qu'il n'y a rien que nous pouvons faire à ce point à propos de ce paquet (utilisateurs).

Oh, sur le site du projet.

Ce projet n'est pas maintenu. Veuillez prendre en considération. Plus d'informations à https://github.com/open-source-chest/take-it-over.