在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 {
  (...)
}