Question

我想在我的angular2 app中使用第三方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 {
  (...)
}

在angular2中包装第三方组件

1 个答案: