angular - 在管道中使用ElementRef

我试着把malarkey变成一个角度管。我们的想法是，您将能够编写一个类似于['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的提供者！
这里发生了什么事？

最佳答案

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，可以将其注入构造函数（根元素）或利用ViewChilddecorator：

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