首页 文章

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

提问于
浏览 次
1

我如何向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();

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

dom svg html5-canvas angular getelementbyid

2 回答

  • 3

    对于静态添加到组件模板的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，那么你已经进入了这个主题了 .

    回复于
  • 3

    实际上你可以使用 @ViewChild 引用相应的 ElementRef . 像这样的东西：

    @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 .

    回复于

相关问题