将元素引用传递给指令

Question

I want to pass an element reference to a directive. I know that the reference of the element on which the directive has been applied can be obtained by

private _elemRef: ElementRef

but I want to pass the reference to other element to the directive. Any help is appreciated.

Here's the demo code. I m using a ripple directive.

<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

You can pass the template variable #other to an @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>