Zugriff auf Fensterobjekt in Ionic 2/Schräg 2 Beta 10

Question

In Angular 1.x und Ionic 1.x kann ich das Fenster Objekt durch Dependency Injection zugreifen, etwa so:

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; 
     } 
    }; 
}]); 

Wie kann ich das gleiche tun in Angular 2 & Ionen 2?

Answer 1

Sie können das window Objekt, ohne etwas zu importieren, aber nur um es in Ihrem Typoskript Code verwendet:

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

Sie könnten auch die window Objekt innerhalb eines Service wickeln so ist, dann können Sie es zu Testzwecken verspotten .

wäre eine naive Implementierung sein:

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

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

Sie können dies dann liefern, wenn die Anwendung Bootstrapping so ist es überall verfügbar ist.

import { WindowService } from './windowservice'; 

bootstrap(AppComponent, [WindowService]); 

Und es nur in Ihren Komponenten verwenden.

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

Eine anspruchsvollere Service könnte die Methoden wickeln und ruft so es angenehmer zu bedienen ist.