Accéder à la fenêtre de l'objet dans Ionique 2 / Angulaire 2 beta 10

Angulaire 1.x et Ionique 1.x j'ai pu accéder à la fenêtre de l'objet par le biais de l'injection de dépendance, comme suit:

angular.module('app.utils', [])

.factory('LocalStorage', ['$window', function($window) {
    return {
        set: function(key, value) {
          $window.localStorage[key] = value;
        },
        get: function(key, defaultValue) {
          return $window.localStorage[key] || defaultValue;
        }
    };
}]);

Comment puis-je faire la même chose dans Angulaire 2 & Ionique 2?

à l'aide de fenêtre même comme vous le feriez dans la plaine du javascript?
vous pouvez également effectuer un service de l'habillage de la fenêtre de l'objet. De sorte que vous pouvez plus facilement s'en moquer dans les tests.
Pouvez-vous me donner un exemple s'il vous plaît?
pour le service?
J'ai édité @sebaferreras 's réponse avec une naïveté exemple. 🙂

OriginalL'auteur Akilan Arasu | 2016-08-04

  1. 8

    Vous pouvez utiliser le window objet sans importer quoi que ce soit, mais en utilisant simplement dans votre tapuscrit code:

    import { Component } from "@angular/core";

@Component({
     templateUrl:"home.html"
})
export class HomePage {

  public foo: string;

  constructor() {
    window.localStorage.setItem('foo', 'bar');

    this.foo = window.localStorage.getItem('foo');
  }
}

    Vous pouvez également envelopper le window objet à l'intérieur d'un service, alors vous pouvez vous moquer des fins de test.

    Une implémentation naïve serait:

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

@Injectable()
export class WindowService {
  public window = window;
}

    Vous pouvez alors fournir cette quand le démarrage de l'application, de sorte qu'il est disponible partout.

    import { WindowService } from './windowservice';

bootstrap(AppComponent, [WindowService]);

    Et simplement l'utiliser dans vos composants.

    import { Component } from "@angular/core";
import { WindowService } from "./windowservice";

@Component({
     templateUrl:"home.html"
})
export class HomePage {

  public foo: string;

  constructor(private windowService: WindowService) {
    windowService.window.localStorage.setItem('foo', 'bar');

    this.foo = windowService.window.localStorage.getItem('foo');
  }
}

    Un plus sophistiqué de service peut encapsuler les méthodes et les appels de sorte qu'il est plus agréable à utiliser.

    Merci pour l'edit @toskv. Je voudrais ajouter un constructeur dans le WindowService code avec un nullable paramètre, donc dans les tests, vous pouvez envoyer un objet fantaisie avec les méthodes que vous souhaitez tester.
    c'est une bonne ideea, n'hésitez pas à le faire! 🙂
    Merci beaucoup toskv et @sebaferreras. Je comprends mieux maintenant. Il est aussi possible d'écrire personnalisé setters/getters pour localStorage?
    tout est possible! 🙂 il n'y a rien qui vous empêche d'ajouter d'autres méthodes/getters/setters pour ce service.
    juste la première recherche google github.com/marcj/angular2-localstorage

    OriginalL'auteur sebaferreras