将元素引用传递给指令

时间:2016-08-08 19:45:15

标签: javascript angular

我想将一个元素引用传递给一个指令。我知道可以通过

获得应用该指令的元素的引用
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
}
} 

1 个答案:

答案 0 :(得分:5)

您可以将模板变量#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>