带有引导 JS 的 Angular 2答案

【问题标题】：Angular 2 with bootstrap JS带有引导 JS 的 Angular 2
【发布时间】：2016-07-30 23:18:27
【问题描述】：

我一直在尝试使用我习惯使用的强大引导库的进度条动画，它在 Angular 1 上效果很好，但遗憾的是在 Angular 2 上效果不佳。

我的 Angular 2 HTML：

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar"
  aria-valuenow="{{enemy.HP}}" aria-valuemin="0" aria-valuemax="{{enemy.HP}}" style="width:{{(enemy.HP/100)*100}}%">
      {{enemy.HP}} HP
  </div>
</div>

导致此错误：

EXCEPTION: Template parse errors:
Can't bind to 'aria-valuenow' since it isn't a known native property ("iv class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar"
  [ERROR ->]aria-valuenow="{{enemy.HP}}" aria-valuemin="0" aria-valuemax="{{enemy.HP}}" style="width:{{(enemy.HP/"): AppComponent@22:2
Can't bind to 'aria-valuemax' since it isn't a known native property ("r progress-bar-striped active" role="progressbar"
  aria-valuenow="{{enemy.HP}}" aria-valuemin="0" [ERROR ->]aria-valuemax="{{enemy.HP}}" style="width:{{(enemy.HP/100)*100}}%">
      {{enemy.HP}} HP
  </div>
"): AppComponent@22:49

如果有人可以分享另一种使用引导进度条的方法，我将不胜感激。谢谢！

【问题讨论】：

标签： twitter-bootstrap angular

【解决方案1】：

您可以使用 ng2-bootstrap 及其进度条组件。见相应文档：

http://valor-software.com/ng2-bootstrap/。

这是文档中的一个示例：

<div class="row">
  <div class="col-sm-4">
    <progressbar value="55"></progressbar>
  </div>
  <div class="col-sm-4">
    <progressbar class="progress-striped" value="22" 
                 type="warning">22%</progressbar>
  </div>
  <div class="col-sm-4">
    <progressbar class="progress-striped active"
                 max="200" value="166" type="danger"><i>166 / 200</i>
    </progressbar>
  </div>
</div>

【讨论】：

我已经在寻找它但安装它的时间很糟糕，不知何故我得到了GET http://localhost:3000/ng2-bootstrap 404 (Not Found)，在用npm install --save ng2-bootstrap安装它后，添加了这个：import { Ng2BootstrapConfig, Ng2BootstrapTheme, PROGRESSBAR_DIRECTIVES } from '../../../ng2-bootstrap';，以及指令directives: [PROGRESSBAR_DIRECTIVES, CORE_DIRECTIVES],
是的，不是那么明显。有关详细信息，请参阅此问题：stackoverflow.com/questions/35865644/…。 SystemJS 中有一些配置要做。然后你可以像这样导入组件：import { Ng2BootstrapConfig, Ng2BootstrapTheme, PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';
更新了我的 SystemJS，但出现了同样的错误。这与上面问题中显示的错误不同。我一直在尝试用谷歌搜索我的错误，但所有解决方案都不适用于我

【解决方案2】：

aria-valuenow 等属性的绑定应类似于[attr.aria-valuenow]（请参阅Angular 2 docs: Attribute, class, and style bindings 中的更多详细信息）。双花括号也将消失。

style 属性中的width 应类似于[style.width]（详细信息Angular 2 docs: NgStyle）

所以你的 sn-p 看起来像这样：

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar"
  [attr.aria-valuenow]="enemy.HP" aria-valuemin="0" [attr.aria-valuemax]="enemy.HP" [style.width]="(enemy.HP/100)*100 + '%'">
      {{enemy.HP}} HP
  </div>
</div>

【讨论】：

这个很适合我。这是我的模板：<div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" attr.aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100" [style.width]="percentage + '%'"></div> </div>