随着前端技术的日益发展，使用第三方库已经成为了大部分前端开发者的日常。其中，npm 市场上拥有众多的优秀包供我们使用。ng2-bar-rating 是一个用于 Angular2+ 的评分插件包，是一个非常不错的选择。下面将详细介绍如何在 Angular 项目中使用 ng2-bar-rating。
安装和引入
运行以下命令安装 ng2-bar-rating：
npm install ng2-bar-rating --save
安装完成后，在组件的 module.ts 中引入 ng2-bar-rating：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------------ - ---- -----------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -使用 ng2-bar-rating
接下来，在组件的 .html 文件中使用 ng2-bar-rating：
<ng2-bar-rating [(rate)]="rate" [max]="5" [showValues]="true"></ng2-bar-rating>
代码解释：
[(rate)]：绑定评分值，该参数需要从组件的 .ts 文件中传递进去。[max]：评分的最大值，这里设置为 5 分。[showValues]：是否显示评分数值。
到这里，ng2-bar-rating 的基本配置已经完成了。但是，我们还可以进一步自定义 ng2-bar-rating 的外观。
自定义 ng2-bar-rating 外观
ng2-bar-rating 提供了多种样式配置选择。以下是一些常见的外观自定义方法：
1. 修改评分颜色
<ng2-bar-rating [rate]="rate" [max]="5" [showValues]="true" [colors]="{filled: '#f40', unfilled: '#ddd'}"></ng2-bar-rating>代码解释：
[colors]：传递一个包含两个颜色属性的对象：filled（填充颜色）和unfilled（未填充颜色）。
2. 自定义评分图标
<ng2-bar-rating [rate]="rate" [max]="5" [showValues]="true" [glyphs]="{before: '\u2605', after: '\u2606'}"></ng2-bar-rating>代码解释：
[glyphs]：传递一个包含两个图标属性的对象before和after，用于指定填充和未填充的图标。
3. 自定义自定义外观
<ng2-bar-rating [rate]="rate" [max]="5" [showValues]="true" [template]="myTemplate"></ng2-bar-rating>
<ng-template #myTemplate let-ratenum="ratenum" let-mxnum="maxnum">
<div>
<i *ngFor="let n of [].constructor(mxnum); let i = index" [ngClass]="i < ratenum ? 'fa fa-star' : 'fa fa-star-o'"></i>
<span>{{ratenum}} / {{mxnum}}</span>
</div>
</ng-template>代码解释：
[template]：传递一个模板，这里使用myTemplate来实现自定义外观。#myTemplate：定义一个叫myTemplate的模板引用。let-ratenum="ratenum" let-mxnum="maxnum"：用于定义模板的输入参数。<i *ngFor="let n of [].constructor(mxnum); let i = index" [ngClass]="i < ratenum ? 'fa fa-star' : 'fa fa-star-o'"></i>：使用 ngFor 指令，在 ng2-bar-rating 中添加多个图标。
代码示例
下面是一个完整的使用示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
--------------- --------------- --------- ------------------- ------------------ ------- --------- --------------------------
--
--
------ ----- ------------ -
---- - ----
-结语
使用 ng2-bar-rating 可以快速实现评分功能，同时进行进一步的外观自定义，让评分界面更符合我们的需求。希望本文能对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f83238a385564ab6c0c