5

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 で同じことを行うにはどうすればよいですか?

4

1 に答える 1

8

何もインポートせずにオブジェクトを使用できますがwindow、typescript コードで使用するだけです。

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

より洗練されたサービスでは、メソッドと呼び出しをラップして、より使いやすくすることができます。

于 2016-08-04T12:55:17.133 に答える