简介
@coturiv/ionic-rating 是一个帮助开发者快速实现星级评分功能的 npm 包，可以很方便的集成到 Ionic 应用中。
安装
可以很方便的通过 npm 安装：
--- ------- ---------------------
使用
初始化
在需要使用星级评分功能的页面的 module 中，导入 IonicRatingModule：
------ - -------- - ---- ----------------
------ - --------------- - ---- ----------------
------ - ------ - ---- ------------
------ - ----------------- - ---- ------------------------
-----------
------------- -
-------
--
-------- -
---------------------------------
------------------
--
-------- -
------
-
--
------ ----- ------------ --模板
在 HTML 文件中，直接使用 ion-rating 标签，并指定 rating 属性为当前星级评分值， numStars 属性为总共星星数目：
----------- ------------ --------------------------
代码逻辑
在对应页面的 TS 代码逻辑中，导入 IonicRatingSelector，可以获取控件的视图实例对象。
------ - ---------- --------- - ---- ----------------
------ - ---------- -------------- --------- - ---- ----------------
------ - ------------------- - ---- ------------------------
------------
------------
--------- ---------------
------------ ---------------
--
------ ----- ------ -
---------------------- --------------- --------------------
------------------ -------- -------------- ------ ---------- ---------- -
-
---------------- -
--------------------------- ---------
---------------------------------
-
-其中 myRating 是使用 ion-rating 控件自定义或默认生成的 ID 值。
指导意义
通过使用 @coturiv/ionic-rating npm 包，可以方便快捷地实现用于评分的单选控件。该控件基于 Ionic 的 UI 框架设计，可以很好地融入现有的 Ionic 应用中。
在使用时，只需要在 HTML 文件中添加简单的控件代码，在对应的 TS 文件中引入视图实例对象，就可以方便地获取用户选择的星级评分值。
@coturiv/ionic-rating 提供了一种简单高效的方法，帮助开发者实现星级评分功能并快速集成到应用中，提高开发效率。
示例代码
下面是一个简单的示例，创建了一个星级评分控件，共五颗星，星级评分值初始值为 3.5 分：
----------- ------------- ------------ --------------------------
在 TS 代码中，以 @ViewChild 注解获取该视图实例对象：
------ - ---------- --------- - ---- ----------------
------ - ---------- -------------- --------- - ---- ----------------
------ - ------------------- - ---- ------------------------
------------
------------
--------- ---------------
------------ ---------------
--
------ ----- ------ -
---------------------- --------------- --------------------
------------------ -------- -------------- ------ ---------- ---------- -
-
---------------- -
--------------------------- ---------
---------------------------------
-
-来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671cc30d0927023822821