在ES2015中使用Angular中的DOCUMENT服务

Question

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

在AngularJS 1.x中，我们可以注入$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注入某种Angular包装器？

根据官方文档， DOCUMENT是“可注射令牌”，但是我看不到任何使用它的示例。 我真的没有任何东西给它注入 。

我试过像这样导入它：

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-server的残废实现 ）。