Angular 2 - Предоставить сторонней библиотеке элемент для рендеринга

Question

Как бы я предоставил элемент DOM сторонней библиотеке в Angular 2?

Например, если 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 динамически, вы в любом случае уже в этой теме.