angular2 получить ссылку выбора компонента

Question

Я пытаюсь интегрировать эту библиотеку progressbar.js в angular2 приложения, как эта библиотека работает, что вы должны добавить прогрессбар в контейнер, передавая имя селектора

var ProgressBar = require('progressbar.js'); 

// Assuming we have an empty <div id="container"></div> in HTML 

var bar = new ProgressBar.Line('#container', {easing: 'easeInOut'}); 
bar.animate(1); // Value from 0.0 to 1.0 

проблема здесь, когда я хочу несколько пРОГРЕСС-баров и каждый из них должен содержаться в отдельном компоненте иначе все прогресс-бары будут добавлены в тот же контейнер (который не то, что я хочу)

var ProgressBar = require('progressbar.js'); 
@Component({ 
    selector: 'progress-bar', 
    template: `<div class="#pb-container"> </div>` 
}) 
export class ProgressBarCmp { 

    @Input() color; 
    @Input() strokeWidth; 

    ngOnInit() { 
    this.bar = new ProgressBar.Circle('#pb-container', {  
     color: color, 
     strokeWidth: strokeWidth, 
    }); 
    this.bar.animate(this.skill.grade/100); 
} 

Должен ли я иметь уникальный идентификатор для каждого компонент или есть угловой способ решить эту проблему?

Answer 1

Благодаря @JBNizet комментарий, проблема была решена путем передачи this.elementRef.nativeElement вместо #pb-container

var ProgressBar = require('progressbar.js'); 
@Component({ 
    selector: 'progress-bar', 
    template: '' // <= no need for a container anymore 
}) 
export class ProgressBarCmp { 

    @Input() color; 
    @Input() strokeWidth; 

    constructor(private elementRef:ElementRef){ 
    } 

    ngOnInit() { 
    this.bar = new ProgressBar.Circle(this.elementRef.nativeElement, {  
     color: this.color, 
     strokeWidth: this.strokeWidth, 
    }); 
    this.bar.animate(this.skill.grade/100); 
}