Html 在 Angular 7 组件（TypeScript）中通过 ID 获取元素并在组件中使用其属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/54291940/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get an element by ID in Angular 7 component (TypeScript) and use its attributes in component
提问by TAB
We can use the standard Javascript method to get the element by its id:
我们可以使用标准的 Javascript 方法通过元素的 id 来获取元素：
document.getElementById("dataBlock").innerHTML = "";
In Angular however, the preferred way to refer to an element is with a template reference variable:
然而，在 Angular 中，引用元素的首选方式是使用模板引用变量：
<div #dataBlock></div>
<button (click)="dataBlock.innerHTML = ''">Clear content</button>
That variable also allows to access the element in code with the help of @ViewChild:
该变量还允许在@ViewChild 的帮助下访问代码中的元素：
@ViewChild("dataBlock") block: ElementRef;
clearContent() {
this.block.nativeElement.innerHTML = "";
}
My question is that, what would be the impact of above code on performance and memory in an angular application.
我的问题是，上述代码对 Angular 应用程序中的性能和内存有什么影响。
采纳答案by Jonas Praem
While the outcome of those 2 lines of code are essentially doing the same thing. The reason for doing it the 'Angular way' is that Angular applications are not always meant to be ran in a browser. For example you can run Angular in a web worker which doesn't have direct access to the DOM.
虽然这两行代码的结果本质上是在做同样的事情。以“Angular 方式”执行此操作的原因是 Angular 应用程序并不总是要在浏览器中运行。例如，您可以在无法直接访问 DOM 的 Web Worker 中运行 Angular。
Another reason is that it is a bit cleaner to have a component reference to a specific element instead of doing getElementById every time you need to access the element.
另一个原因是让组件引用特定元素而不是每次需要访问元素时都执行 getElementById 会更简洁一些。
My question is that, what would be the impact of above code on performance and memory in an angular application.
我的问题是，上述代码对 Angular 应用程序中的性能和内存有什么影响。
Angular gets compiled to javascript so in an Angular SPA this doesn't have any big performance impact. If you want to measure exact performance / memory usage, I would recommend using an extension like lighthouse. Memory & performance optimisation in Angular is not so much about using the Angular framework, but how you divide your modules, how you lazyload and most important in a SPA - the initial load time. I recommend sticking to the Angular framework and let Angular take care of compile optimisation. You won't safe any measurable time by using getElementById over ViewChild.
Angular 被编译为 javascript，因此在 Angular SPA 中这不会对性能产生任何大的影响。如果你想测量准确的性能/内存使用情况，我建议使用像lighthouse这样的扩展。Angular 中的内存和性能优化并不是关于使用 Angular 框架，而是关于如何划分模块、如何延迟加载以及 SPA 中最重要的 - 初始加载时间。我建议坚持使用 Angular 框架，让 Angular 负责编译优化。通过在 ViewChild 上使用 getElementById，您将无法确保任何可测量的时间。
Made a stackblitzmeasuring the time it takes to perform this.block.nativeElement.innerHTML = "";- it comes out as 0 milliseconds.
进行了一次堆栈闪电战，测量执行所需的时间this.block.nativeElement.innerHTML = "";- 结果为 0 毫秒。
