19新版教育培训风格演示站

标题: 在Angular中操作DOM：意料之外的结果及优化技术 [打印本页]

作者: Tommy子言 时间: 2019-1-11 16:30
标题: 在Angular中操作DOM：意料之外的结果及优化技术

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

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

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

@Component({
...
template: `
<button (click)="remove()">Remove child component</button>
<a-comp></a-comp>
`
})
export class AppComponent {}

复制代码

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

@Component({...})
export class AppComponent {
...
remove() {
this.renderer.removeChild(
this.hostElement.nativeElement, // parent App comp node
this.childComps.first.nativeElement // child A comp node
);
}
}

复制代码

[attach]54[/attach]

欢迎光临 19新版教育培训风格演示站 (http://47.100.112.22/demo/train/)