blocks|key|4448278|text|您只需在设置提供程序后注入它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4448279|import+{provide}+from+'angular2/core';
bootstrap(...,+[provide(Window,+{useValue:+window})]);

constructor(private+window:+Window)+{
++++//+this.window
}|code-block|syntax|javascript|4448280|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can just inject it after you've set the provider:

<pre><code>import {provide} from 'angular2/core';
bootstrap(..., [provide(Window, {useValue: window})]);

constructor(private window: Window) {
 // this.window
}
</code></pre>

blocks|key|4448325|text|截至今天(2016年4月)，前一个解决方案中的代码不起作用，我认为可以将window直接注入App.ts，然后将您需要的值收集到服务中，以便在应用程序中全局访问，但如果您更喜欢创建和注入自己的服务，则可以使用此方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4448326|https://gist.github.com/WilldelaVega777/9afcbd6cc661f4107c2b74dd6090cebf|offset|length|4448327|//--------------------------------------------------------------------------------------------------
//+Imports+Section:
//--------------------------------------------------------------------------------------------------
import+{Injectable}+from+'angular2/core'
import+{window}+from+'angular2/src/facade/browser';

//--------------------------------------------------------------------------------------------------
//+Service+Class:
//--------------------------------------------------------------------------------------------------
@Injectable()
export+class+WindowService
{
++++//----------------------------------------------------------------------------------------------
++++//+Constructor+Method+Section:
++++//----------------------------------------------------------------------------------------------
++++constructor(){}

++++//----------------------------------------------------------------------------------------------
++++//+Public+Properties+Section:
++++//----------------------------------------------------------------------------------------------
++++get+nativeWindow()+:+Window
++++{
++++++++return+window;
++++}
}|code-block|syntax|javascript|4448328|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|20|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

As of today (April 2016), the code in the previous solution doesn't work, I think it is possible to inject window directly into App.ts and then gather the values you need into a service for global access in the App, but if you prefer to create and inject your own service, a way simpler solution is this.

<a href="https://gist.github.com/WilldelaVega777/9afcbd6cc661f4107c2b74dd6090cebf" rel="noreferrer">https://gist.github.com/WilldelaVega777/9afcbd6cc661f4107c2b74dd6090cebf</a>

<pre><code>//--------------------------------------------------------------------------------------------------
// Imports Section:
//--------------------------------------------------------------------------------------------------
import {Injectable} from 'angular2/core'
import {window} from 'angular2/src/facade/browser';

//--------------------------------------------------------------------------------------------------
// Service Class:
//--------------------------------------------------------------------------------------------------
@Injectable()
export class WindowService
{
 //----------------------------------------------------------------------------------------------
 // Constructor Method Section:
 //----------------------------------------------------------------------------------------------
 constructor(){}

 //----------------------------------------------------------------------------------------------
 // Public Properties Section:
 //----------------------------------------------------------------------------------------------
 get nativeWindow() : Window
 {
 return window;
 }
}
</code></pre>

blocks|key|4448365|text|我知道问题是如何将窗口对象注入到组件中，但您这样做似乎只是为了获得localStorage。如果你真的想要localStorage，为什么不使用一个公开它的服务，比如h5webstorage。然后你的组件将描述它真正的依赖关系，这使你的代码更具可读性。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4448366|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/SirDarquan/h5webstorage^0|2B|C|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I know the question is how to inject the window object into a component but you're doing this just to get to localStorage it seems. If you realy just want localStorage, why not use a service that exposes just that, like <a href="https://github.com/SirDarquan/h5webstorage" rel="nofollow">h5webstorage</a>. Then you component will describe its real dependencies which makes your code more readable.

blocks|key|4448491|text|随着angular+2.0.0-rc.5的发布，引入了NgModule。以前的解决方案对我不再有效。这是我为修复它所做的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4448492|app.module.ts：|4448493|@NgModule({++++++++
++providers:+[
++++{+provide:+'Window',++useValue:+window+}
++],
++declarations:+[...],
++imports:+[...]
})
export+class+AppModule+{}|code-block|syntax|javascript|4448494|在一些组件中：|4448495|import+{+Component,+Inject+}+from+'@angular/core';

@Component({...})
export+class+MyComponent+{
++++constructor+(@Inject('Window')+window:+Window)+{}
}|4448496|您也可以使用窗口而不是字符串‘OpaqueToken’|offset|length|4448497|编辑：|4448498|AppModule用于在main.ts中引导您的应用程序，如下所示：|4448499|import+{+platformBrowserDynamic++}+from+'@angular/platform-browser-dynamic';
import+{+AppModule+}+from+'./app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)|4448500|有关NgModule的更多信息，请阅读Angular+2文档：https://angular.io/docs/ts/latest/guide/ngmodule.html|4448501|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/docs/ts/latest/api/core/index/OpaqueToken-class.html|1|https://angular.io/docs/ts/latest/guide/ngmodule.html^0|0|0|0|0|0|F|B|0|0|0|0|0|V|1H|1|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1A|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1B|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1C|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1D|8|@]|9|@$O|1E|P|1F|1|1G]]|A|$]]|$1|Q|3|R|5|6|7|1H|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1I|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|1J|8|@]|9|@]|A|$G|H]]|$1|W|3|X|5|6|7|1K|8|@]|9|@$O|1L|P|1M|1|1N]]|A|$]]|$1|Y|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]|16|$5|11|12|13|A|$14|17]]]]

With the release of angular 2.0.0-rc.5 NgModule was introduced. The previous solution stopped working for me. This is what I did to fix it:

app.module.ts:

<pre><code>@NgModule({ 
 providers: [
 { provide: 'Window', useValue: window }
 ],
 declarations: [...],
 imports: [...]
})
export class AppModule {}
</code></pre>

In some component:

<pre><code>import { Component, Inject } from '@angular/core';

@Component({...})
export class MyComponent {
 constructor (@Inject('Window') window: Window) {}
}
</code></pre>

You could also use an <a href="https://angular.io/docs/ts/latest/api/core/index/OpaqueToken-class.html" rel="noreferrer">OpaqueToken</a> instead of the string 'Window'

Edit:

The AppModule is used to bootstrap your application in main.ts like this:

<pre><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
</code></pre>

For more information about NgModule read the Angular 2 documentation: <a href="https://angular.io/docs/ts/latest/guide/ngmodule.html" rel="noreferrer">https://angular.io/docs/ts/latest/guide/ngmodule.html</a>

blocks|key|4448526|text|我对'Window‘字符串使用了OpaqueToken：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4448527|import+{unimplemented}+from+'@angular/core/src/facade/exceptions';
import+{OpaqueToken,+Provider}+from+'@angular/core/index';

function+_window():+any+{
++++return+window;
}

export+const+WINDOW:+OpaqueToken+=+new+OpaqueToken('WindowToken');

export+abstract+class+WindowRef+{
++++get+nativeWindow():+any+{
++++++++return+unimplemented();
++++}
}

export+class+BrowserWindowRef+extends+WindowRef+{
++++constructor()+{
++++++++super();
++++}
++++get+nativeWindow():+any+{
++++++++return+_window();
++++}
}


export+const+WINDOW_PROVIDERS+=+[
++++new+Provider(WindowRef,+{+useClass:+BrowserWindowRef+}),
++++new+Provider(WINDOW,+{+useFactory:+_window,+deps:+[]+}),
];|code-block|syntax|javascript|4448528|并且仅用于在Angular+2.0.0-rc-4中的引导程序中导入WINDOW_PROVIDERS。|style|CODE|4448529|但是随着Angular+2.0.0-rc.5的发布，我需要创建一个单独的模块：|4448530|import+{+NgModule+}+from+'@angular/core';
import+{+WINDOW_PROVIDERS+}+from+'./window';

@NgModule({
++++providers:+[WINDOW_PROVIDERS]
})
export+class+WindowModule+{+}|4448531|并且刚刚在我的主app.module.ts的imports属性中定义|4448532|import+{+NgModule+}+from+'@angular/core';
import+{+BrowserModule+}+from+'@angular/platform-browser';

import+{+WindowModule+}+from+'./other/window.module';

import+{+AppComponent+}+from+'./app.component';

@NgModule({
++++imports:+[+BrowserModule,+WindowModule+],
++++declarations:+[+...+],
++++providers:+[+...+],
++++bootstrap:+[+AppComponent+]
})
export+class+AppModule+{}|4448533|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/docs/ts/latest/api/core/index/OpaqueToken-class.html^0|G|B|0|0|0|X|G|0|0|0|8|D|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|F|7|16|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|17|8|@$A|18|B|19|K|L]]|9|@]|C|$]]|$1|M|3|N|5|6|7|1A|8|@]|9|@]|C|$]]|$1|O|3|P|5|F|7|1B|8|@]|9|@]|C|$G|H]]|$1|Q|3|R|5|6|7|1C|8|@$A|1D|B|1E|K|L]]|9|@]|C|$]]|$1|S|3|T|5|F|7|1F|8|@]|9|@]|C|$G|H]]|$1|U|3|-4|5|6|7|1G|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]]]

I used <a href="https://angular.io/docs/ts/latest/api/core/index/OpaqueToken-class.html">OpaqueToken</a> for 'Window' string: 

<pre><code>import {unimplemented} from '@angular/core/src/facade/exceptions';
import {OpaqueToken, Provider} from '@angular/core/index';

function _window(): any {
 return window;
}

export const WINDOW: OpaqueToken = new OpaqueToken('WindowToken');

export abstract class WindowRef {
 get nativeWindow(): any {
 return unimplemented();
 }
}

export class BrowserWindowRef extends WindowRef {
 constructor() {
 super();
 }
 get nativeWindow(): any {
 return _window();
 }
}


export const WINDOW_PROVIDERS = [
 new Provider(WindowRef, { useClass: BrowserWindowRef }),
 new Provider(WINDOW, { useFactory: _window, deps: [] }),
];
</code></pre>

And used just to import <code>WINDOW_PROVIDERS</code> in bootstrap in Angular 2.0.0-rc-4.

But with the release of Angular 2.0.0-rc.5 I need to create a separate module:

<pre><code>import { NgModule } from '@angular/core';
import { WINDOW_PROVIDERS } from './window';

@NgModule({
 providers: [WINDOW_PROVIDERS]
})
export class WindowModule { }
</code></pre>

and just defined in the imports property of my main <code>app.module.ts</code>

<pre><code>import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { WindowModule } from './other/window.module';

import { AppComponent } from './app.component';

@NgModule({
 imports: [ BrowserModule, WindowModule ],
 declarations: [ ... ],
 providers: [ ... ],
 bootstrap: [ AppComponent ]
})
export class AppModule {}
</code></pre>

blocks|key|4448562|text|在Angular+RC4中，下面的工作是上面一些答案的组合，在根app.ts中添加提供程序：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4448563|@Component({
++++templateUrl:+'build/app.html',
++++providers:+[
++++++++anotherProvider,
++++++++{+provide:+Window,+useValue:+window+}
++++]
})|code-block|syntax|javascript|4448564|然后在您的服务等中将其注入到构造函数中|4448565|constructor(
++++++@Inject(Window)+private+_window:+Window,
)|4448566|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

In Angular RC4 the following works which is a combination of some of the above answers, in your root app.ts add it the providers:

<pre><code>@Component({
 templateUrl: 'build/app.html',
 providers: [
 anotherProvider,
 { provide: Window, useValue: window }
 ]
})
</code></pre>

Then in your service etc inject it into the constructor

<pre><code>constructor(
 @Inject(Window) private _window: Window,
)
</code></pre>

blocks|key|4448598|text|为了让它在Angular+2.1.1上工作，我不得不使用一个字符串@Inject+window|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4448599|++constructor(+@Inject('Window')+private+window:+Window)+{+}|code-block|syntax|javascript|4448600|然后像这样嘲笑它|4448601|beforeEach(()+=>+{
++let+windowMock:+Window+=+<any>{+};
++TestBed.configureTestingModule({
++++providers:+[
++++++ApiUriService,
++++++{+provide:+'Window',+useFactory:+(()+=>+{+return+windowMock;+})+}
++++]
++});|4448602|在普通的@NgModule中，我像这样提供它|4448603|{+provide:+'Window',+useValue:+window+}|4448604|entityMap^0|X|7|0|0|0|0|4|9|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|S|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|T|$]]

To get it to work on Angular 2.1.1 I had to <code>@Inject</code> window using a string

<pre><code> constructor( @Inject('Window') private window: Window) { }
</code></pre>

and then mock it like this

<pre><code>beforeEach(() =&gt; {
 let windowMock: Window = &lt;any&gt;{ };
 TestBed.configureTestingModule({
 providers: [
 ApiUriService,
 { provide: 'Window', useFactory: (() =&gt; { return windowMock; }) }
 ]
 });
</code></pre>

and in the ordinary <code>@NgModule</code> I provide it like this

<pre><code>{ provide: 'Window', useValue: window }
</code></pre>

blocks|key|4448569|text|Angular+4引入了InjectToken，他们还为文档创建了一个名为DOCUMENT标记。我认为这是官方的解决方案，它在AoT中有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4448570|我使用相同的逻辑创建了一个名为ngx-window-token的小型库，以防止重复执行此操作。|4448571|我已经在其他项目中使用过它，并在AoT中构建，没有出现任何问题。|4448572|下面是我在other+package中使用它的方法|4448573|这是plunker|4448574|在你的模块中|4448575|组件中的imports:+[+BrowserModule,+WindowTokenModule+]|style|CODE|4448576|constructor(@Inject(WINDOW)+_window)+{+}|4448577|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/angular/angular/blob/bebedfed24d6fbfa492e97f071e1d1b41e411280/packages/platform-browser/src/dom/dom_tokens.ts#L19|1|https://www.npmjs.com/package/ngx-window-token|2|https://github.com/maxisam/ngx-no-animation-for-dinosaur|3|https://plnkr.co/edit/uy2UfN0sD5I2qoNotGu7?p=preview^0|11|8|0|0|F|G|1|0|0|5|D|2|0|2|7|3|0|0|4|19|0|0|14|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@$A|18|B|19|1|1A]]|C|$]]|$1|D|3|E|5|6|7|1B|8|@]|9|@$A|1C|B|1D|1|1E]]|C|$]]|$1|F|3|G|5|6|7|1F|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|1G|8|@]|9|@$A|1H|B|1I|1|1J]]|C|$]]|$1|J|3|K|5|6|7|1K|8|@]|9|@$A|1L|B|1M|1|1N]]|C|$]]|$1|L|3|M|5|6|7|1O|8|@]|9|@]|C|$]]|$1|N|3|O|5|6|7|1P|8|@$A|1Q|B|1R|P|Q]]|9|@]|C|$]]|$1|R|3|S|5|6|7|1S|8|@$A|1T|B|1U|P|Q]]|9|@]|C|$]]|$1|T|3|-4|5|6|7|1V|8|@]|9|@]|C|$]]]|U|$V|$5|W|X|Y|C|$Z|10]]|11|$5|W|X|Y|C|$Z|12]]|13|$5|W|X|Y|C|$Z|14]]|15|$5|W|X|Y|C|$Z|16]]]]

Angular 4 introduce InjectToken, and they also create a token for document called <a href="https://github.com/angular/angular/blob/bebedfed24d6fbfa492e97f071e1d1b41e411280/packages/platform-browser/src/dom/dom_tokens.ts#L19" rel="noreferrer">DOCUMENT</a>. I think this is the official solution and it works in AoT.

I use the same logic to create a small library called <a href="https://www.npmjs.com/package/ngx-window-token" rel="noreferrer">ngx-window-token</a> to prevent doing this over and over. 

I have used it in other project and build in AoT without issues.

Here is how I used it in <a href="https://github.com/maxisam/ngx-no-animation-for-dinosaur" rel="noreferrer">other package</a> 

Here is the <a href="https://plnkr.co/edit/uy2UfN0sD5I2qoNotGu7?p=preview" rel="noreferrer">plunker</a>

In your module 

<code>
imports: [ BrowserModule, WindowTokenModule ]
</code>
In your component

<code>
constructor(@Inject(WINDOW) _window) { }
</code>

blocks|key|4448717|text|这是我在使用Angular+4AOT时发现的最短/最简洁的答案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4448718|来源：https://github.com/angular/angular/issues/12631#issuecomment-274260009|offset|length|4448719|@Injectable()
export+class+WindowWrapper+extends+Window+{}

export+function+getWindow()+{+return+window;+}

@NgModule({
++...
++providers:+[
++++{provide:+WindowWrapper,+useFactory:+getWindow}
++]
++...
})
export+class+AppModule+{
++constructor(w:+WindowWrapper)+{
++++console.log(w);
++}
}|code-block|syntax|javascript|4448720|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/angular/angular/issues/12631#issuecomment-274260009^0|0|3|1Y|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

This is the shortest/cleanest answer that I've found working with Angular 4 AOT

Source:
<a href="https://github.com/angular/angular/issues/12631#issuecomment-274260009" rel="nofollow noreferrer">https://github.com/angular/angular/issues/12631#issuecomment-274260009</a>

<pre><code>@Injectable()
export class WindowWrapper extends Window {}

export function getWindow() { return window; }

@NgModule({
 ...
 providers: [
 {provide: WindowWrapper, useFactory: getWindow}
 ]
 ...
})
export class AppModule {
 constructor(w: WindowWrapper) {
 console.log(w);
 }
}
</code></pre>

blocks|key|4448701|text|在@Component声明之前，您也可以这样做，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4448702|declare+var+window:+any;|code-block|syntax|javascript|4448703|编译器实际上会让您现在访问全局窗口变量，因为您将其声明为类型为any的假定全局变量。|4448704|不过，我不建议在应用程序中到处访问window，您应该创建访问/修改所需窗口属性的服务(并在组件中注入这些服务)来限定您可以对窗口执行的操作，而不是让它们修改整个窗口对象。|4448705|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Before the @Component declaration, you can do that too,

<pre><code>declare var window: any;
</code></pre>

The compiler will actually let you then access the global window variable now since you declare it as an assumed global variable with type any.

I wouldn't suggest to access window everywhere in your application though, You should create services that access/modify the needed window attributes (and inject those services in your components) to scope what you can do with the window without letting them to modify the whole window object.

blocks|key|4448785|text|@maxisam感谢你的ngx-window-token。我也在做类似的事情，但后来换成了你的。这是我的服务，用于监听窗口大小调整事件并通知订阅者。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4448786|​|4448787|import+{+Inject,+Injectable+}+from+'@angular/core';
import+{+BehaviorSubject+}+from+'rxjs/BehaviorSubject';
import+{+Observable+}+from+'rxjs/Observable';
import+'rxjs/add/observable/fromEvent';
import+{+WINDOW+}+from+'ngx-window-token';


export+interface+WindowSize+{
++++readonly+width:+number;
++++readonly+height:+number;
}

@Injectable()
export+class+WindowSizeService+{

++++constructor(+@Inject(WINDOW)+private+_window:+any+)+{
++++++++Observable.fromEvent(_window,+'resize')
++++++++.auditTime(100)
++++++++.map(event+=>+<WindowSize>{width:+event['currentTarget'].innerWidth,+height:+event['currentTarget'].innerHeight})
++++++++.subscribe((windowSize)+=>+{
++++++++++++this.windowSizeChanged$.next(windowSize);
++++++++});
++++}

++++readonly+windowSizeChanged$+=+new+BehaviorSubject<WindowSize>(<WindowSize>{width:+this._window.innerWidth,+height:+this._window.innerHeight});
}|code-block|syntax|javascript|4448788|4448789|短小而甜美，工作起来就像一个魔法师。|4448790|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/ngx-window-token^0|C|G|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|10|8|@]|9|@]|C|$I|J]]|$1|K|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|L|3|M|5|6|7|12|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]]]

@maxisam thanks for <a href="https://www.npmjs.com/package/ngx-window-token" rel="nofollow noreferrer">ngx-window-token</a>. I was doing something similar but switched to yours. This is my service for listening to window resize events and notifying subscribers.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>import { Inject, Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import { WINDOW } from 'ngx-window-token';


export interface WindowSize {
 readonly width: number;
 readonly height: number;
}

@Injectable()
export class WindowSizeService {

 constructor( @Inject(WINDOW) private _window: any ) {
 Observable.fromEvent(_window, 'resize')
 .auditTime(100)
 .map(event =&gt; &lt;WindowSize&gt;{width: event['currentTarget'].innerWidth, height: event['currentTarget'].innerHeight})
 .subscribe((windowSize) =&gt; {
 this.windowSizeChanged$.next(windowSize);
 });
 }

 readonly windowSizeChanged$ = new BehaviorSubject&lt;WindowSize&gt;(&lt;WindowSize&gt;{width: this._window.innerWidth, height: this._window.innerHeight});
}</code></pre>
</div>
</div>


Short and sweet and works like a charm.

blocks|key|4448935|text|这样做就足够了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4448936|export+class+AppWindow+extends+Window+{}+|code-block|syntax|javascript|4448937|并这样做|4448938|{+provide:+'AppWindow',+useValue:+window+}+|4448939|让AOT快乐|4448940|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

It is enough to do 

<pre><code>export class AppWindow extends Window {} 
</code></pre>

and do 

<pre><code>{ provide: 'AppWindow', useValue: window } 
</code></pre>

to make AOT happy

blocks|key|4448984|text|您可以在Angular+4上使用NgZone：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4448985|import+{+NgZone+}+from+'@angular/core';

constructor(private+zone:+NgZone)+{}

print()+{
++++this.zone.runOutsideAngular(()+=>+window.print());
}|code-block|syntax|javascript|4448986|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can use NgZone on Angular 4:

<pre><code>import { NgZone } from '@angular/core';

constructor(private zone: NgZone) {}

print() {
 this.zone.runOutsideAngular(() =&gt; window.print());
}
</code></pre>

blocks|key|4449015|text|可以通过文档直接访问window的对象|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4449016|document.defaultView+==+window|code-block|syntax|javascript|4449017|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

There is an opportunity for direct access to the object of window through the document

<pre><code>document.defaultView == window
</code></pre>

blocks|key|4449051|text|当全局变量在整个应用程序中都可以访问时，通过DI(依赖注入)获取窗口对象不是一个好主意。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4449052|但是如果你不想使用window对象，那么你也可以使用self关键字，它也指向window对象。|offset|length|style|CODE|4449053|entityMap^0|0|Q|4|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

Getting window object via DI(Dependency Injection) is not a good idea when global variables are accessible throughout the application.

But if you don't want to use window object then you can also use <code>self</code> keyword which also points to window object.

blocks|key|4448951|text|保持简单，伙计们！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4448952|export+class+HeroesComponent+implements+OnInit+{
++heroes:+Hero[];
++window+=+window;
}

<div>{{window.Object.entries({+foo:+1+})+%7C+json}}</div>|code-block|syntax|javascript|4448953|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Keep it simple, folks!

<pre><code>export class HeroesComponent implements OnInit {
 heroes: Hero[];
 window = window;
}

&lt;div&gt;{{window.Object.entries({ foo: 1 }) | json}}&lt;/div&gt;
</code></pre>

blocks|key|4448997|text|你可以从注入的文档中获取窗口。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4448998|import+{+Inject+}+from+'@angular/core';
import+{+DOCUMENT+}+from+'@angular/common';

export+class+MyClass+{

++private+window:+Window;

++constructor(@Inject(DOCUMENT)+private+document:+Document)+{
+++++this.window+=+this.document.defaultView;
++}

++check()+{
++++console.log(this.document);
++++console.log(this.window);
++}

}|code-block|syntax|javascript|4448999|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can get window from injected document.
<pre><code>import { Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

export class MyClass {

 private window: Window;

 constructor(@Inject(DOCUMENT) private document: Document) {
 this.window = this.document.defaultView;
 }

 check() {
 console.log(this.document);
 console.log(this.window);
 }

}
</code></pre>

blocks|key|4449158|text|实际上，访问窗口对象非常简单，这是我的基本组件，我测试了它的工作情况|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4449159|import+{+Component,+OnInit,Inject+}+from+'@angular/core';
import+{DOCUMENT}+from+'@angular/platform-browser';

@Component({
++selector:+'app-verticalbanners',
++templateUrl:+'./verticalbanners.component.html',
++styleUrls:+['./verticalbanners.component.css']
})
export+class+VerticalbannersComponent+implements+OnInit+{

++constructor(){+}

++ngOnInit()+{
++++console.log(window.innerHeight+);
++}

}|code-block|syntax|javascript|4449160|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Actually its very simple to access window object 
here is my basic component and i tested it its working

<pre><code>import { Component, OnInit,Inject } from '@angular/core';
import {DOCUMENT} from '@angular/platform-browser';

@Component({
 selector: 'app-verticalbanners',
 templateUrl: './verticalbanners.component.html',
 styleUrls: ['./verticalbanners.component.css']
})
export class VerticalbannersComponent implements OnInit {

 constructor(){ }

 ngOnInit() {
 console.log(window.innerHeight );
 }

}
</code></pre>

I'm writing an Angular 2 service in TypeScript that will make use of <code>localstorage</code>. I want to inject a reference to the browser <code>window</code> object into my service since I don't want to reference any global variables like Angular 1.x <code>$window</code>.

How do I do that?

How to inject window into a service?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在用将使用localstorage的TypeScript编写一个Angular 2服务。我想将浏览器window对象的引用注入到我的服务中，因为我不想引用任何全局变量，比如Angular 1.x $window。我该怎么做？

问如何将窗口注入到服务中？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将窗口注入到服务中？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将窗口注入到服务中？
EN