angular2得到一個組件的選擇參考

我想這個庫progressbar.js在angular2應用整合，這個庫工作的方式，你必須在進度添加到容器中通過將選擇名稱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); 
}

我應該有每個唯一的ID組件還是有一個角度來解決這個問題？

來源

2016-06-12 Murhaf Sousli

[文檔]解決（http://progressbarjs.readthedocs.io/en/latest/api/shape/）說：您可以傳遞DOM元素本身而不是選擇器。有關如何獲取組件的DOM元素，請參閱http://stackoverflow.com/questions/32693061/angular-2-typescript-get-hold-of-an-element-in-the-template。 –

@JBNizet謝謝 –

感謝@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); 
}

來源

2016-06-12 15:36:15

angular2得到一個組件的選擇參考

回答

相關問題