В Angular 1.x и Ionic 1.x я мог получить доступ к объекту окна через внедрение зависимостей, например так:
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;
}
};
}]);
Как я могу сделать то же самое в Angular 2 и Ionic 2?
Вы можете использовать объект 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');
}
}
Более сложный сервис может обернуть методы и вызовы, чтобы его было удобнее использовать.
WindowService конструктор с параметром, допускающим значение NULL, чтобы в тестах вы могли отправить фиктивный объект с методами, которые хотите протестировать.
- person sebaferreras; 04.08.2016
