在管道中使用ElementRef

Question

我正在尝试将malarkey实现为Angular2管道.这个想法是你将能够编写一个类似的表达式['foo','bar','baz'] | malarkey并获得打字效果.Malarkey需要选择父元素,所以我想设置我的管道以获取ElementRef并将选择器传递给malarkey:

import { Pipe, PipeTransform, ElementRef } from '@angular/core';

declare var malarkey: any;

@Pipe({
  name: 'malarkey'
})
export class MalarkeyPipe implements PipeTransform {
  ...
  elem: HTMLElement;

  constructor(el: ElementRef) {
    this.elem = el.nativeElement;
  }

  transform(value: [string], args?: {}): any {
    if (!value) return value;
    var elem = this.elem;
    let opts = {
      ...
    };


    let act = malarkey(elem,opts);
    return value.forEach(function(w) {
      act.type(w).pause().delete();
    });
  }

}

我得到一个例外:没有ElementRef的提供者!

这里发生了什么事？

Answer 1

elementRef不能在管道级别进行注入.仅适用于组件,并且对应于组件的根元素.

话虽这么说,你可以提供一个elementRef作为管道的输入.这是一个示例:

@Pipe({
  name: 'malarkey'
})
export class MalarkeyPipe implements PipeTransform {
  ...

  transform(value: [string], elem:ElementRef): any {
    if (!value) return value;
    var elem = this.elem.nativeElement;
    let opts = {
      ...
    };

    let act = malarkey(elem,opts);
    return value.forEach((w) => {
      act.type(w).pause().delete();
    });
  }
}

你可以这样使用它:

['foo','bar','baz'] | malarkey:elementRef

要在组件中获取elementRef,可以将其注入构造函数(根元素)或利用ViewChild装饰器:

@Component({
  template: `
    <div>
      <div #test>Some div</div>
    </div>
  `
})
export class SomeComponent {
  @ViewChild('test')
  elementRef:ElementRef;
}