Angular 10 - 什么是错误：R3InjectorError(AppModule)[Window -> Window -> Window]答案

【问题标题】：Angular 10 - What is a Error: R3InjectorError(AppModule)[Window -> Window -> Window]Angular 10 - 什么是错误：R3InjectorError(AppModule)[Window -> Window -> Window]
【发布时间】：2020-09-03 16:46:20
【问题描述】：

我正在尝试通过可以注入的服务访问 Angular 中的窗口对象。

import { Injectable } from '@angular/core';

function _window():any {
  return window;
}

@Injectable({
  providedIn: "root"
})
export class WindowRef {
  get nativeWindow():any{
    return _window()
  }
}

我尝试创建一个可注入服务并尝试将其包含在 App 模块中，但看起来有一些错误。尝试添加为

@Injectable({
  providedIn: "root"
})

在服务文件中，并在 app.module 中尝试了另一种方式

import { WindowRef } from './_windowRef.service';

然后

providers: [WindowRef],

错误错误：R3InjectorError(AppModule)[窗口-> 窗口-> 窗口]： NullInjectorError: 没有 Window 的提供者！

。 this is the link to stackblitz - code.

您能否告诉我这里缺少什么或如何消除错误。

【问题讨论】：

标签： angular angular10

【解决方案1】：

您正在使 WindowRef 服务可用，但是 Angular 应该如何知道将它用于 Window？ WindowRef != 窗口。

通常的方法是使用带有injection token 的工厂提供程序，如下所示：

export const WINDOW = new InjectionToken<Window>('window');

export const WindowProvider: FactoryProvider = {
  provide: WINDOW,
  useFactory: getWindow
};

export function getWindow(): Window {
  return window;
}

然后在你的模块中提供它：

providers: [ WindowProvider ]

并为您的组件使用@Inject：

constructor( @Inject(WINDOW) private window: Window )

【讨论】：

谢谢罗迪，我会检查注入令牌部分

【解决方案2】：

找到了一个简单的出路。直接提供window对象为

providers: [
    { provide: Window, useValue: window }
]

和访问任何地方

constructor(private window: Window) {
    // ...
}

【讨论】：