在angular2中包装第三方组件

Question

我想在我的angular2应用中使用第三方UI元素/组件，例如， spin.js。要使用该库，我将不得不直接访问DOM这是不是真的应该在angular2做的方式（以下几个原因例如像服务器端渲染）：

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

是否有关于如何任何意见在angular2中处理这些第三方库？还是直接的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 { 
    (...) 
}