在Angular中操作DOM：意料之外的结果及优化技术

我最近在NgConf的一个研讨会上讨论了Angular中的高级DOM操作的话题。我从基础知识开始讲起，例如使用模版引用和DOM查询来访问DOM元素，一直谈到了使用视图容器来动态渲染模版和组件。如果你还没有看过这个演讲，我鼓励你去看看。通过一系列的实践，你将可以快速地学会新知识，并加强认知。关于这个话题，我在NgViking 也有一个简单地谈话。

然而，如果你觉得那个版本太长了（译者注：指演讲视频）不想看，或者比起听，你更喜欢阅读，那么我在这篇文章总结了（演讲的）关键概念。首先，我会介绍在Angular中操作DOM的工具和方法，然后再介绍一些我在研讨会上没有说过的、更高级的优化技术。

你可以在这个GitHub仓库中找到我演讲中使用过的样例。

1. @Component({
   
2.   ...
   
3.   template: `
   
4.     <button (click)="remove()">Remove child component</button>
   
5.     <a-comp></a-comp>
   
6.   `
   
7. })
   
8. export class AppComponent {}

复制代码

解决这个任务的一个错误的方法就是使用Renderer或者原生的DOM API来直接移除<a-comp> DOM 元素：

1. @Component({...})
   
2. export class AppComponent {
   
3.   ...
   
4.   remove() {
   
5.     this.renderer.removeChild(
   
6.        this.hostElement.nativeElement, // parent App comp node
   
7.        this.childComps.first.nativeElement // child A comp node
   
8.      );
   
9.   }
   
10. }

复制代码