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

前端之家收集整理的这篇文章主要介绍了Angular中用于访问DOM元素的`link`函数的等价物前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有一些例子是在Angular 2指令上设置link属性注册转换DOM的回调. @H_502_7@

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

@H_502_7@

enter image description here

@H_502_7@link属性

@H_502_7@

@H_502_7@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.

@H_502_7@Angular 4指令的API非常不同.如何在Angular 4中实现类似的功能

解决方法

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

@H_502_7@

app.directive('name',function() {
   return {
      compile: () => {}
      link: () => {}
@H_502_7@角度在这方面是不同的.编译和链接现在由编译器作为一个阶段执行,您无法挂钩到该进程.您可以在以下文章中阅读更多相关信息:

@H_502_7@> 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

@H_502_7@而不是链接函数Angular提供了两种访问DOM的机制:

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

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

@H_502_7@

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

猜你在找的Angularjs相关文章