代码之家 › 专栏 › 技术社区 › Brian

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

getelementbyid angular html5-canvas svg dom

1

Brian · 技术社区 · 10 年前

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

所以,我希望这个答案对这个^^案例有效。

2 回复 | 直到 10 年前

1

4

Thierry Templier 10 年前

事实上,您可以参考相应的 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 .

2

3

Günter Zöchbauer 10 年前

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