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

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

getelementbyid angular html5-canvas svg dom

Brian · 技术社区 · 8 年前

如何在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 回复 | 直到 8 年前

Thierry Templier 8 年前

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

Günter Zöchbauer 8 年前

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

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前