在 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模板网!