角窗提供者

我的$window去哪了?没问题，可以使用这个提供商将窗口注入到Angular组件中。

为什么?

因为我们不想引用全局变量窗口对象直接在Angular组件中使用，因为我们的应用可能会在Angular Universal中使用，而且最好的做法是避免直接引用全局对象。虽然你可能没有使用Angular Universal的计划，但这让我们能够干净地注入浏览器的原生代码窗口对象转换为组件。

这有什么不同?

虽然已经有很多解决方案提出了间接访问的方法窗口对象，我发现它们中的许多实际上并不执行任何条件验证，以确保我们的Angular应用程序是在浏览器的上下文中执行的窗口对象。

以下是一个我觉得不合适的解决方案:

进口｛可注射的｝从“@angular /核心”；函数getWindow（）：任何｛返回窗口；｝＠可注射的（）出口类WindowRefService｛得到nativeWindow（）：任何｛返回getWindow（）；｝｝

快速查看一下，可以看出我们没有检查应用程序是否在浏览器的上下文中执行。此外，我们可能想要支持测试的上下文，在其中我们可能想要模拟窗口对象。

建议的解决方案

下面是一个建议的解决方案，用于创建可扩展的方法来注入窗口放到Angular组件中。我把这个放到src / app /核心/服务/ window.service.ts在我的申请文件中:

进口｛isPlatformBrowser｝从“@angular /普通”；进口｛ClassProvider，FactoryProvider，InjectionToken，PLATFORM_ID｝从“@angular /核心”；/*创建一个新的注入令牌，用于将窗口注入到组件中。*／出口常量窗口＝新InjectionToken（“WindowToken”）；/*定义抽象类以获取对全局窗口对象的引用。*／出口摘要类WindowRef｛得到nativeWindow（）：窗口|对象｛扔新错误（“未实现”。）；｝｝/*定义实现抽象类并返回本机窗口对象的类。*／出口类BrowserWindowRef扩展WindowRef｛构造函数（）｛超级（）；｝得到nativeWindow（）：窗口|对象｛返回窗口；｝｝/*创建一个返回本机窗口对象的工厂函数。*／出口函数windowFactory（browserWindowRef：BrowserWindowRef，platformId：对象）：窗口|对象｛如果（isPlatformBrowser（platformId））｛返回browserWindowRef．nativeWindow；｝返回新对象（）；｝/*为使用BrowserWindowRef类的WindowRef令牌创建一个可注入的提供商。*／常量browserWindowProvider：ClassProvider＝｛提供：WindowRef，useClass：BrowserWindowRef｝；/*创建一个可注入的提供商，使用windowFactory函数返回本机窗口对象。*／常量windowProvider：FactoryProvider＝｛提供：窗口，useFactory：windowFactory，deps：［WindowRef，PLATFORM_ID］｝；/*创建一个提供商数组。*／出口常量WINDOW_PROVIDERS＝［browserWindowProvider，windowProvider］；

有几点需要注意:

• 我有一个InjectionToken被声明为窗口这是出口。我们将使用它来注入窗口对象加入到组件中。
• 我定义了一个抽象类WindowRef的访问器nativeWindow财产。
• 然后定义BrowserWindowRef类，它扩展抽象类，实现nativeWindow属性返回全局可用窗口对象。
• 的windowFactory ()函数确定应用程序是否在浏览器的上下文中执行isPlatformBrowser ()函数。现在，如果应用程序没有在浏览器的上下文中执行，那么我只需返回new对象．这部分是可扩展的，因为您可以在另一个上下文中返回一个模拟对象。类的实例BrowserWindowRef和platformId对象。文件中指定了这些依赖项windowProvider
• 的browserWindowProvider是一个ClassProvider的实例BrowserWindowRef使用WindowRef注入令牌。
• 的windowProvider是一个FactoryProvider使用windowFactory返回窗口对象(或空对象)时窗口使用注入令牌。
• 最后，我们声明一个名为WINDOW_PROVIDERS．

要使用这个，我们需要添加WINDOW_PROVIDERS对我们的app.module.ts模块装饰的供应商数组:

＠NgModule（｛声明：［AppComponent，］，进口：［BrowserModule］，供应商：［WINDOW_PROVIDERS］，引导：［AppComponent］｝）出口类AppModule｛｝

你可能也有CoreModule(可能有不同的名称)，它是一个模块，包含应用程序可用的所有服务、拦截器、模型等。如果是这种情况，只需导入WINDOW_PROVIDERS在那个模块中，然后它被导入到AppModule．

然后，我们可以用窗口注入令牌来注入窗口我们的组件:

进口｛窗口｝从“. . /核心/服务/ window.service”；出口类IndexComponent｛构造函数（＠注入（窗口）私人窗口：窗口）｛控制台．日志（窗口）；｝｝

下面是一个例子window.navigator.userAgent字符串: