angular - 什么是 Angular 中访问 DOM 元素的 `link` 函数的等价物

Question

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

一个示例是为 D3.js 图形创建指令。看这个pen :

link属性:

Directives that want to modify the DOM typically use the link option to register DOM listeners as well as update the DOM. It is executed after the template has been cloned and is where directive logic will be put.

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

Answer 1

在 AngularJS 中有 2 个阶段:编译和链接。 AngularJS 允许您挂接到这些阶段并在编译阶段执行自定义 DOM 修改，并在链接阶段执行应用程序模型(作用域)和 DOM 元素之间的绑定(bind)。这就是指令定义对象 (DDO) 具有这些键的原因:

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

Angular 在这方面是不同的。编译器现在将编译和链接作为一个阶段执行，您无法 Hook 该过程。您可以在以下文章中阅读更多相关信息:

• 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 元素注入(inject)到构造函数中——主要由指令使用

您可以阅读有关查询的更多信息 here .这是将 DOM 元素注入(inject)指令的示例:

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