javascript - 在 ES2015 中使用 Angular 中的 DOCUMENT 服务

Question

我有一个用 ES2015 编写的简单 Angular 应用程序，不是 TypeScript。

在 AngularJS 1.x 中，我们可以注入(inject) $document 以避免使用 document 浏览器全局。

我们如何在 Angular 中做同样的事情(这些文档都是针对 TypeScript 的，令人惊讶的是，没有一个文档似乎显示了这一基本要求)。

我的 main.js 入口文件(我也使用 Webpack 2.2)是这样的:

'use strict';

import 'reflect-metadata';
import 'zone.js';

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

let boot = document.addEventListener('DOMContentLoaded', () => {
    platformBrowserDynamic().bootstrapModule(AppModule);
});

export { boot };

目前这是可行的，但它使用全局 document 来添加 DOMContentLoaded 事件处理程序。

如何在 Angular 中为 document 注入(inject)某种 Angular 包装器？

据官方docs DOCUMENT 是一个“可注入(inject) token ”，但我看不到任何使用它的示例。而且我真的没有任何东西可以将其注入(inject)。

我尝试像这样导入它:

import {DOCUMENT} from '@angular/platform-browser';

但现在 DOCUMENT 只是一个具有 desc 属性的对象？

Answer 1

document 在应用程序引导之前使用。 上面的代码不能从 DOCUMENT 提供程序中受益(也不应该，它会在这里引入不必要的抽象)。

DOCUMENT 应该用作 Angular 应用程序内 DOM 操作的抽象:

class SomeComponent {
  constructor(@Inject(DOCUMENT) private document) {
  }
  ngOnInit() {
    this.document.querySelector(...)...
  }
}

它等于浏览器中的window.document，但可以通过DI进行模拟，这在测试或服务器端应用程序中很有用(后者使用来自@angular/platform的crippled implementation -server 默认情况下)。