前言
在前端开发中，我们经常需要使用第三方库来实现一些特定的功能，而 npm 就是我们常用的第三方库管理工具之一。本篇文章将介绍一个名为 angular-review-ui 的 npm 包，这个包可以为 Angular 应用提供可重用的 UI 组件。
安装
在使用 angular-review-ui 前，需要先安装 angular 和 angular-cli。安装命令如下：
npm install -g @angular/cli npm install --save angular
接下来，执行以下命令来安装 angular-review-ui：
npm install --save angular-review-ui
使用
引入模块
在使用 angular-review-ui 前，需要先引入模块。在 app.module.ts 中添加以下引用：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - -------------- - ---- -------------------- ------ - ------------ - ---- ------------------ ----------- ------------- --------------- -------- --------------- ---------------- ---------- -------------- -- ------ ----- --------- --
使用组件
现在，我们可以在应用中使用 angular-review-ui 提供的组件了。例如，我们想要在页面上显示一个 review 组件，只需在组件的模板中添加以下代码：
<rv-review title="My Review" [rating]="4" [comments]="comments"></rv-review>
其中，title 是 review 组件的标题，rating 是评分，comments 是一个评论数组。接下来，我们需要在组件的 TypeScript 文件中定义 comments 数组：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ----------------
--------- -
---------- --------- ------- ------------ ----------------------------------
-
--
------ ----- ----------------- -
-------- - -
- ----- -------- -------- ----- -- - ----- ---------- ------- - --
- ----- ------ -------- -- ---- ----- ------- - -
--
-完成上述步骤后，我们就可以在页面上看到一个 review 组件，它将显示两个评论以及评分。
示例代码
下面是一个包含 review 组件的完整示例应用：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ----------- - ---- -----------------
------ - -------------- - ---- --------------------
------ - ------------ - ---- ------------------
------------
--------- ----------------
--------- -
---------- --------- ------- ------------ ----------------------------------
-
--
------ ----- ----------------- -
-------- - -
- ----- -------- -------- ----- -- - ----- ---------- ------- - --
- ----- ------ -------- -- ---- ----- ------- - -
--
-
-----------
------------- -------------- -------------------
-------- --------------- ------------ ----------------
---------- --------------
--
------ ----- --------- --指导意义
使用第三方库可以大大提高开发效率，同时也能够提高代码的可重用性。而 angular-review-ui 提供了一个方便易用的 UI 组件库，可以帮助我们更快速地开发 Angular 应用。通过学习本文，我们不仅了解了如何在 Angular 应用中使用 angular-review-ui，还学习了如何定义一个包含 review 组件的完整应用。这对我们今后开发 Angular 应用非常有指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f89238a385564ab6d8d