Question

我正在尝试将此库progressbar.js集成到angular2 app中，此库的工作方式是您必须通过传递选择器名称将进度条添加到容器

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，或者是否有一种有角度的方法来解决此问题？

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);
}

angular2获取组件的选择器引用

1 个答案: