Angular中访问DOM元素的“链接”函数的等价物是啥

Posted 2023-03-13

【中文标题】Angular中访问DOM元素的“链接”函数的等价物是啥

【英文标题】：What is the equivalent of `link` function in Angular to access DOM elementsAngular中访问DOM元素的“链接”函数的等价物是什么

【发布时间】：2018-02-25 04:00:58

【问题描述】：

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

一个例子是为 D3.js 图创建指令。看到这个pen：

link 属性：

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

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

【问题讨论】：

为什么需要它？

我试图了解将 D3/Vega-lite 合并到项目中的最佳方式。我非常了解 D3，它看起来可能很复杂，因为 Angular/D3 在操纵 DOM 和管理状态方面都非常强大——但方式却截然不同。我是 Angular 的新手，我见过的所有 D3/Angular 示例都使用 AngularJS 指令。最终，我对开发模块化数据可视化感兴趣，其他开发人员可以使用它来呈现不同的数据。

【参考方案1】：

在 AngularJS 中有两个阶段：编译和链接。 AngularJS 允许您在编译阶段挂钩到这些阶段并执行自定义 DOM 修改，并在链接阶段执行应用模型（范围）和 DOM 元素之间的绑定。这就是指令定义对象 (DDO) 具有以下键的原因：

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

Angular 在这方面是不同的。编译和链接现在由编译器作为一个阶段执行，您没有办法挂钩该过程。您可以在以下文章中了解更多信息：

Exploring Angular DOM manipulation techniques using ViewContainerRef Angular’s $digest is reborn in the newer version of Angular Here is what you need to know about dynamic components in Angular

Angular 提供了两种访问 DOM 的机制，而不是链接函数：

查询 (@ViewChildren) - 主要由组件使用 DOM 元素注入构造函数 - 主要由指令使用

您可以阅读有关查询here 的更多信息。这是将 DOM 元素注入指令的示例：

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

【讨论】：

@conner.xyz，谢谢）您可能还想查看这篇文章Never again be confused when implementing ControlValueAccessor in Angular forms。它展示了如何将小部件包装到 Angular 组件中。有关此类更深入的内容，请关注我和angular-in-depth 发布:)。祝你好运