如何在Angular CLI创建的项目中添加jkAngularRatingStars模块依赖？

嘿，我完全懂你的困惑！你看到的那段angular.module('MyApp', ['jkAngularRatingStars']);代码是**AngularJS（1.x版本）**的写法，但你用Angular CLI创建的是Angular 2+项目——这俩是架构完全不同的框架，所以你的项目里找不到angular实例太正常啦！

下面是Angular CLI项目里正确引入这个星级评分模块的步骤：

1. 先安装模块依赖 #

打开项目根目录的终端，执行安装命令：

npm install jk-angular-rating-stars --save
# 或者用yarn的话：
# yarn add jk-angular-rating-stars

2. 在Angular模块中导入该组件 #

Angular 2+是基于NgModule来管理依赖的，你需要把JkAngularRatingStarsModule导入到你要使用它的模块里（通常先在根模块AppModule里导入）：

打开src/app/app.module.ts，修改代码如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 导入星级评分模块
import { JkAngularRatingStarsModule } from 'jk-angular-rating-stars';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // 把模块添加到imports数组中
    JkAngularRatingStarsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 在组件模板中使用星级评分组件 #

现在你可以在任意组件的HTML模板里使用这个组件了，比如在app.component.html里添加：

<!-- 示例：设置初始评分为3，最大星级为5 -->
<jk-angular-rating-stars [rating]="3" [maxRating]="5"></jk-angular-rating-stars>

这样就能正常显示星级评分功能啦～以后遇到这类问题可以先留意文档对应的Angular版本，AngularJS和Angular 2+的写法差异很大哦！

内容的提问来源于stack exchange，提问作者Marwan Alaa