在Angular 8和9中提供和注入“窗口”与窗口之间有什么区别？

灯罩

我有两个使用这些版本的Angular项目：

9.0.0-下一个6
8.1.0

在版本9中，我使用它来提供和注入window对象：

@NgModule({
  providers: [
    {
      provide: Window,
      useValue: window
    },
  ]
})

export class TestComponent implements OnInit {
  constructor(@Inject(Window) private window: Window)
}

哪个工作正常。

将这种方法用于版本8会在编译期间引发警告和错误：

警告：无法解析TestComponent的所有参数……

我通过使用单引号解决了它，如下所示：

@NgModule({
  providers: [
    {
      provide: 'Window',
      useValue: window
    },
  ]
})

export class TestComponent implements OnInit {
  constructor(@Inject('Window') private window: Window)
}

这两个版本有什么区别？
导致此问题的Angular 8和9有什么区别？

Waterplea

为了使您的应用程序可以与服务器端渲染一起使用，我建议您不仅使用窗口直通令牌，而且还以SSR友好的方式创建此令牌，而无需完全引用window。Angular具有DOCUMENT用于访问的内置令牌document。这是我想出的让我的项目window通过令牌使用的内容：

import {DOCUMENT} from '@angular/common';
import {inject, InjectionToken} from '@angular/core';

export const WINDOW = new InjectionToken<Window>(
    'An abstraction over global window object',
    {
        factory: () => {
            const {defaultView} = inject(DOCUMENT);

            if (!defaultView) {
                throw new Error('Window is not available');
            }

            return defaultView;
        },
    },
);

编辑：由于这是人们经常需要的东西，因此我们使用了这种技术来创建一个带有用于全局对象的注入令牌的小型开源库，因此您可以使用它：

https://github.com/ng-web-apis/common

它有一个用于模拟的姐妹库，可与Angular Universal中的SSR一起使用：

https://github.com/ng-web-apis/universal

总体而言，请查看我们在Angular中用于本机API的中心：

https://ng-web-apis.github.io/

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。