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

在管道中使用ElementRef

1 个答案: