在Angular中，访问DOM元素的等效函数是什么？

Question

在Angular中，访问DOM元素的等效函数是什么？

angulartypescriptdomd3.jsangularjs-directive

5

有关在Angular 2指令上设置link属性以注册转换DOM的回调函数的示例。

一个示例是为D3.js图形创建指令。请参见此pen：

link属性：

想要修改DOM的指令通常使用link选项来注册DOM监听器以及更新DOM。它会在模板克隆后执行，这是指令逻辑将被放置的地方。

Angular 4指令的API非常不同。如何实现相似的功能在Angular 4中？

- conner.xyz

1

你为什么需要它？ - Max Koretskyi

1

我正在尝试理解将D3/Vega-lite最佳地融入项目的方法。我非常了解D3，因为Angular和D3都非常擅长操作DOM和管理状态，所以这似乎可能很复杂，但它们的方式却非常不同。我对Angular还很陌生，而我看到的所有D3/Angular示例都使用AngularJS指令。最终，我有兴趣开发可用于高级别渲染不同数据的模块化数据可视化，供其他开发人员使用。 - conner.xyz

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- courses.indepth.dev · Accepted Answer

在AngularJS中，有两个阶段：编译和链接。AngularJS允许您钩入这些阶段，并在编译阶段执行自定义DOM修改，在链接阶段执行应用程序模型（作用域）和DOM元素之间的绑定。这就是为什么指令定义对象（DDO）具有以下关键字的原因：

app.directive('name', function() {
   return {
      compile: () => {}
      link: () => {}

Angular在这方面有所不同。现在编译和链接是由编译器一次性执行的，您无法插入到该过程中。您可以在以下文章中了解更多信息：

与其提供链接函数，Angular提供了两种机制来访问DOM：

查询（@ViewChildren） - 大多数由组件使用
将DOM元素注入到构造函数中 - 大多数由指令使用

您可以在这里了解有关查询的更多信息。以下是将DOM元素注入到指令中的示例：

@Directive()
export class MyDirective {
   constructor(el: ElementRef) {}