在angular2中包装第三方组件

问题描述

我想在我的angular2 app中使用第三方ui元素/组件，例如。要使用这个库，我必须直接访问DOM，这实际上不是应该在angular2中完成的方式（出于几个原因，例如服务器端渲染）：

I want to use 3rd party ui elements/components in my angular2 app like e.g. spin.js. To use this library I would have to directly access the DOM which is not really the way it should be done in angular2 (for several reasons like for example server-side rendering):

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

有没有关于如何处理angular2中的第三方库的建议？或者直接DOM操作是现在唯一的方法吗？

Is there any advice on how to deal with such 3rd party libraries in angular2? Or is direct DOM manipulation the only way for now?

推荐答案

我会把它包装成一个自定义指令：

I would wrap it into a custom directive:

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

这篇关于在angular2中包装第三方组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！