在Angular 7组件(TypeScript)中按ID获取元素,并在组件中使用其属性

Question

我们可以使用标准的Javascript方法来获取元素的id:

document.getElementById("dataBlock").innerHTML = "";

但是在Angular中,引用元素的首选方法是使用模板引用变量:

<div #dataBlock></div>
<button (click)="dataBlock.innerHTML = ''">Clear content</button>

该变量还允许在@ViewChild的帮助下访问代码中的元素:

@ViewChild("dataBlock") block: ElementRef;

clearContent() {
  this.block.nativeElement.innerHTML = "";
}

我的问题是,上面的代码会对角度应用程序中的性能和内存产生什么影响.

Answer 1

虽然这两行代码的结果本质上是做同样的事情。采用“Angular 方式”的原因是 Angular 应用程序并不总是意味着在浏览器中运行。例如，您可以在无法直接访问 DOM 的 Web Worker 中运行 Angular。

另一个原因是，使用组件引用特定元素比每次需要访问该元素时都执行 getElementById 更干净一些。

我的问题是，上述代码对角度应用程序中的性能和内存有何影响。

Angular 被编译为 JavaScript，因此在 Angular SPA 中这不会对性能产生任何大的影响。如果您想测量准确的性能/内存使用情况，我建议使用像lighthouse这样的扩展。Angular 中的内存和性能优化并不在于使用 Angular 框架，而在于如何划分模块、如何延迟加载以及 SPA 中最重要的部分 - 初始加载时间。我建议坚持使用 Angular 框架并让 Angular 负责编译优化。通过使用 getElementById 而不是 ViewChild，您不会节省任何可测量的时间。

进行了stackblitz测量执行所需的时间this.block.nativeElement.innerHTML = "";- 结果为 0 毫秒。