相当于Angular中的link函数来访问DOM元素

Question

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

一个示例是为D3.js图创建指令。看到这支笔：

该link属性：

想要修改DOM的指令通常使用link选项来注册DOM侦听器以及更新DOM。它是在克隆模板后执行的，并且将在其中放置指令逻辑。

Angular 4指令的API有很大不同。如何在Angular 4中实现类似的功能？

Answer 1

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

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

角度在这方面是不同的。编译器现在将编译和链接作为一个阶段执行，您没有办法挂入该进程。您可以在以下文章中阅读有关它的更多信息：

• 使用ViewContainerRef探索Angular DOM操作技术
• Angular的$ digest在较新版本的Angular中重生
• 这是您需要了解的有关Angular中的动态组件的知识

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

• 查询（@ViewChildren）-主要由组件使用
• 将DOM元素注入构造函数-主要由指令使用

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

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