Question

如何在Angular 2中为第三方库提供DOM元素？

例如，如果Library是假设的第三方库，我必须执行以下操作：

var fakeId = document.getElementById('fake');  // e.g. canvas or SVG element
var sirRender = Library.confiscate(fakeId);
sirRender.drawMustache();  // accesses canvas context or manipulates SVG

我正在使用Typescript和ES6装饰器组件语法。我想象我可以在ngOnInit内做一些事情，如：

@Component({
  ...
})
export class SirRender {
  ...
  ngOnInit() {
    // do something here?
  }
  ...
}

我的具体用例：

我正在尝试使用名为VexFlow的库，它使用canvas元素并呈现svg。具体来说，有一个例子：

var canvas = $("div.one div.a canvas")[0];
var renderer = new Vex.Flow.Renderer(canvas, Vex.Flow.Renderer.Backends.CANVAS);
var ctx = renderer.getContext();
var stave = new Vex.Flow.Stave(10, 0, 500);
stave.addClef("treble").setContext(ctx).draw();

所以，我希望答案适用于这个^^案例。

Answer 1

事实上，您可以使用ElementRef引用相应的@ViewChild。这样的事情：

@Component({
  (...)
  template: `
    <div #someId>(...)</div>
  `
})
export class Render {
  @ViewChild('someId')
  elt:ElementRef;

  ngAfterViewInit() {
    let domElement = this.elt.nativeElement;
  }
}

在调用elt回调之前将设置

ngAfterViewInit。请参阅此文档：https://angular.io/docs/ts/latest/api/core/ViewChild-var.html。

Answer 2

对于静态添加到组件模板的HTML元素，您可以使用@ViewChild()：

@Component({
  ...
  template: `<div><span #item></span></div>`
})
export class SirRender {
  @ViewChild('item') item;
  ngAfterViewInit() {
    passElement(this.item.nativeElement)
  }
  ...
}

这不适用于动态生成的HTML。

但你可以使用

this.item.nativeElement.querySelector(...)

这令人不悦，因为它是直接的DOM访问，但如果你已经动态生成了DOM，那么你已经进入了这个主题了。

Angular 2 - 为第三方库提供用于渲染的元素

2 个答案: