javascript - 在 angular2 中包装第 3 方组件

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