Angular中用于访问DOM元素的`link`函数的等价物

发布时间：2020-12-17 17:29:15 所属栏目：安全来源：网络整理

导读：有一些例子是在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 e

有一些例子是在Angular 2指令上设置link属性来注册转换DOM的回调.

一个例子是为D3.js图创建指令.见pen：

enter image description here

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中实现类似的功能？

解决方法

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

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

角度在这方面是不同的.编译和链接现在由编译器作为一个阶段执行,您无法挂钩到该进程.您可以在以下文章中阅读更多相关信息：

> 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) {}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!