html - Angular 2的圆形进度条

Question

我正在尝试在 Angular 2 中创建一个百分比加载程序。加载程序应该加载给定百分比的数量，并且它应该是动态的。

HTML

<div class="col-lg-3 col-md-3 bar">
  <div class="c100 p50 small">
    <span>50%</span>
    <div class="slice">
      <div class="bar"></div>
      <div class="fill"></div>
    </div>
  </div>
  <div class="textP">
    <h3>Statistic 1</h3>
  </div>
</div>

我用 50% 的 CSS 创建了一个，但它不是动态的。当我更改百分比时，它只加载先前值的 50%。我是否必须使用 ngModel 或其他任何东西。

Answer 1

假设您有一个组件 circular-percent-loader，您将其包含在父组件中，例如 ,

<circular-percent-loader [percent]="percent"></circular-percent-loader>

这里的百分比是你的子组件的输入。在子组件中，你可以这样设置百分比。我假设你从这个跨度中取出 50%。

<div class="col-lg-3 col-md-3 bar">
                <div class="c100 p50 small">
                    <span>{{percent}}</span>
                    <div class="slice">
                        <div class="bar"></div>
                        <div class="fill"></div>
                    </div>
                </div>
                <div class="textP">
                    <h3>Statistic 1</h3>
                </div>
            </div>

在子组件中.ts

@Input() percent: number;