将元素引用传递给指令

pass element reference to a directive

本文关键字：指令 元素 引用      更新时间：2023-09-26

我想传递一个元素引用到一个指令。我知道指令所应用的元素的引用可以通过

获得
private _elemRef: ElementRef

但是我想把对其他元素的引用传递给指令。如有任何帮助，不胜感激。

下面是演示代码。我正在使用ripple指令。

<ul #other>
  <li ripple>Hello</li>
</ul>

directive.js

@Directive({
  selector: '[ripple]'
})
export class RippleDirective {
  constructor(private _elemRef: ElementRef) {
  }
  @HostListener('click', ['$event'])
  public onClick(event: MouseEvent) {
    // I wan't to refer the '#other' node here
}
}

可以将模板变量#other传递给@Input():

@Directive({
  selector: '[ripple]'
})
export class RippleDirective {
  @Input() ripple;
  @HostListener('click', ['$event'])
  public onClick(event: MouseEvent) {
    this.ripple...
  }
} 

<ul #other>
  <li [ripple]="other">Hello</li>
</ul>
相关文章：