在Angular2中包装第三方组件

Question

我想在我的Angular2应用程序中使用第三方UI元素/组件，例如spin.js。要使用此库，我需要直接访问DOM，但这并不是在Angular2中的正确操作方式（出于多种原因，例如服务器端渲染）:

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

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

- Finkes

---

你能分享一下你的Plunker演示吗？因为我也在尝试构建一个指令，所以我可以参考你的代码并进一步进行...请先生。 - abhilash reddy

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

- Thierry Templier

---

谢谢，它起作用了，只是我必须在spin方法中使用elementRef.nativeElement。 - Finkes

我的组件装饰器不接受指令参数（使用TypeScript）。这是TypeScript的限制还是有其他官方方法可以向组件添加指令？ - masonk