Использование 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

ЭлементRef не доступен для инъекций на уровне трубы. Только для компонентов и соответствует корневому элементу компонента.

Это, как говорится, вы можете предоставить 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; 
}