在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的殘廢實現 ）。