从'@ angular / common'导入{文档{}是什么意思；如果我已经可以访问该文档

Question

我们为什么要麻烦使用import { DOCUMENT } from '@angular/common'？

即使没有它，我也可以访问文档模块

document.getElementById('TestID).focus()

我看到的与导入唯一的区别是将其附加到this关键字上。

this._document.getElementById('TestID').focus();

从Angular的通用模块中导入DOCUMENT是否有真正的好处？

我做了一些研究，但是看不到任何信息。

Answer 1

我的理解是，DOCUMENT代表主要的渲染上下文，无论平台是“浏览器”还是“服务器”，您都可以访问文档。

从document.getElementByID，您只能访问DOM文档。

请参阅“ Angular Document”。

Answer 2

DOCUMENT在例如Web Worker中可能不可用。例如，您可以使用

@Optional() @Inject(DOCUMENT) document

检查它是否为undefined并分支您的代码。

但是，您可以再次检查window.document。

Answer 3

在我们的用例中，我们注入DOCUMENT而不直接使用它的最重要原因是用于服务器端渲染。如果您在诸如document.xxx / ngOnInit之类的任何常规生命周期挂钩中直接调用ngAfterViewInit，则在 SSR 期间，您很可能会遇到document not defined错误。使用DI注入可以避免这种情况。