訪問窗口對象離子2 /角2公測10

Question

在角1.x和離子1.x的我可以通過依賴注入訪問window對象，像這樣：

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

我怎麼可以這樣做in Angular 2 & Ionic 2？

Answer 1

可以使用window對象，而無需輸入任何東西，但只是用它在你的打字稿代碼：

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

你也可以換一個服務裏面window對象，那麼你可以嘲笑它用於測試目的。

一個天真的實現是：

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

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

自舉應用程序時，所以它是隨處可見您可以提供這一點。

import { WindowService } from './windowservice'; 

bootstrap(AppComponent, [WindowService]); 

而只是用它在你的組件。

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

一個更復雜的服務可以換的方法和要求，以便它更愉快的使用。