angular2のサードパーティ製コンポーネントをラップする

Question

私のangle2アプリでサードパーティ製の要素/コンポーネントを使用したいとします。 spin.js。このライブラリを使用するには、私は直接、本当にそれが（例えば、サーバ側のレンダリングのためのようないくつかの理由のために）angular2で行われるべき方法ではありませんDOMにアクセスする必要があります：

var target = document.getElementById('foo') 
var spinner = new Spinner(opts).spin(target); 

は方法上の任意のアドバイスはありますangle2でこのようなサードパーティライブラリに対処するには？それとも、DOMの操作が唯一の方法ですか？

Answer 1

私は、カスタムディレクティブにそれをラップします：

@Directive({ 
    selector: '[spinner]' 
}) 
export class SpinnerDirective { 
    constructor(private elementRef:ElementRef.nativeElement) { 
    } 

    ngAfterViewInit() { 
    var spinner = new Spinner(opts).spin(this.elementRef); 
    } 
} 

と、このようにそれを使用します。

@Component({ 
    (...) 
    template: ` 
    <span spinner>...</span> 
    `, 
    directives: [ SpinnerDirective ] 
}) 
export class SomeComponent { 
    (...) 
}