javascript - Accessing window object in Ionic 2Angular 2 beta 10 - Stack Overflow

admin管理员组

文章数量:1279113

In Angular 1.x and Ionic 1.x I could access the window object through dependency injection, like 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;
        }
    };
}]);

How can I do the same in Angular 2 & Ionic 2?

In Angular 1.x and Ionic 1.x I could access the window object through dependency injection, like 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;
        }
    };
}]);

How can I do the same in Angular 2 & Ionic 2?

• javascript
• angular
• typescript
• ionic2
• ionic3

Share Improve this question Follow edited Sep 30, 2017 at 6:46 sebaferreras 44.7k1111 gold badges119119 silver badges137137 bronze badges asked Aug 4, 2016 at 12:39 Akilan ArasuAkilan Arasu 35011 gold badge55 silver badges1717 bronze badges 5

• using window same as you would in plain javascript? – toskv Commented Aug 4, 2016 at 12:47
• alternatively you could make a service wrapping the window object. So you can more easily mock it in tests. – toskv Commented Aug 4, 2016 at 12:49
• @toskv Can you give me an example please? – Akilan Arasu Commented Aug 4, 2016 at 13:03
• Yes. I want to know how we can make a service wrapping the window object. – Akilan Arasu Commented Aug 4, 2016 at 13:14
• 1 I edited @sebaferreras 's answer with a naive example. :) – toskv Commented Aug 4, 2016 at 13:29

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

You can use the window object without importing anything, but by just using it in your typescript 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');
  }
}

You could also wrap the window object inside a service so then you can mock it for testing purposes.

A naive implementation would be:

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

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

You can then provide this when bootstrapping the application so it's available everywhere.

import { WindowService } from './windowservice';

bootstrap(AppComponent, [WindowService]);

And just use it in your ponents.

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

A more sophisticated service could wrap the methods and calls so it's more pleasant to use.

本文标签： javascriptAccessing window object in Ionic 2Angular 2 beta 10Stack Overflow