如何替换`link`函数来定位Angular 2组件中的DOM元素

Question

Link function in an Angular 1 directive makes it possible to target DOM elements, via

link: function (scope, element, attr) {
    // do something with element[0], e.g. put generated graphics
    // inside the node
}

What's a replacement for that in Angular 2?

Answer 1

This might do what you want:

@Component({ 
...,
  template: `
  <div #target></div>
`
})
class MyComponent {
  @ViewChild('target') target;

  // lifecycle callback when `this.target` becomes available
  ngAfterViewInit() {
    var graph2d = new vis.Graph2d(
        this.target.nativeElement, dataset, options);
  }
}