将元素引用传递给指令

Question

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

获得应用该指令的元素的引用

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

Answer 1

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