从"@angular/通用"导入 { 文档 } 的点是什么;如果我已经可以访问该文档

Question

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

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

document.getElementById('TestID).focus()

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

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

从 Angular 的通用模块导入 DOCUMENT 有什么真正的好处吗？

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

Answer 1

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

Answer 2

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

@Optional() @Inject(DOCUMENT) document

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

但话又说回来，您可能只是检查window.document。

Answer 3

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

从document.getElementByID中，您只能访问DOM Document。

请参考"角度文档"。