javascript - 将元素引用传递给指令

Question

我想将元素引用传递给指令。我知道可以通过以下方式获取应用指令的元素的引用

private _elemRef: ElementRef

但我想将对其他元素的引用传递给指令。感谢您的帮助。

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

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

指令.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>