問題描述

在 Angular 1.x 和 Ionic 1.x 中，我可以通過依賴注入訪問窗口對象，如下所示:

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

我怎樣才能在 Angular 2 中做同樣的事情?離子 2?

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

推薦答案

您可以在不導入任何內容的情況下使用 window 對象，只需在您的打字稿代碼中使用它即可:

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

您還可以將 window 對象包裝在服務中，以便您可以模擬它以進行測試.

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

一個簡單的實現是:

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 components.

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.

這篇關于在 Ionic 2/Angular 2 beta 10 中訪問窗口對象的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！