从 '@angular/common' 导入 { DOCUMENT } 有什么意义？如果我已经可以访问该文档

Question

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

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

document.getElementById('TestID).focus()

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

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

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

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

Answer 1

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

Answer 2

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

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

请参阅“ Angular 文档”。