パイプで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; 
}