Angular 全栈，如何使用外部库？

Question

我正在使用使用 Angular 2 的 Angular Full stack，我刚刚开始学习它。似乎纯 Angular 2 与完整堆栈的结构有很大不同，所以我在遵循其他指南（例如 Angular2 & TypeScript importing of node_modules

）时遇到了一些麻烦

我的问题是： 如何为我的客户端使用已安装的节点模块？

这是我迄今为止尝试过的：

• 我想使用的外部库是https://www.npmjs.com/package/angular-star-rating（尽管我已经尝试过其他库）

• 我执行“npm install angular-star-rating”

• 这是我卡住的地方。我已经尝试了多种方法，例如将它导入到我想要使用它的 component.ts 中，在 html 中加载脚本，以及在我的 app.ts 中加载模块。我没有看到 system.config（来自 system.js，尽管我相信它已被使用），也没有看到 @NgModule 可以加载模块的任何地方，所以我认为最合适的地方是 app.ts。当我执行“gulp serve”时会出现错误，例如

  ./~/angular-star-rating/src/star-rating.component.ts 中的错误 模块解析失败：[目录] 意外字符 '@' (14:0) 您可能需要适当的加载程序来处理此文件类型。 SyntaxError: 意外字符'@' (14:0)

• 快速浏览一下我的项目结构：http://imgur.com/0AnAKBU

谢谢，非常感谢任何帮助

Answer 1

你可以这样使用：

<div star-rating rating="starRating2" read-only="true" max-rating="7" click="click2(param)" mouse-hover="mouseHover2(param)" mouse-leave="mouseLeave2(param)"></div>

并且您也必须在您的范围内指定，例如在上述情况下，您使用starRating2 作为参数。在这种情况下，您可以创建范围并为此定义值，如下所示：

app.controller('appController', ['$scope', function ($scope) {
    $scope.starRating2 = 5;
}])

查看link

Answer 2

第 1 步：添加为项目依赖项

npm install --save angular-star-rating

第 2 步： 添加到 index.html

<script src="[bower or npm folder]/angular-star-rating/dist/index.js"></script>

第 3 步： 在组件中导入

import { StarRatingModule } from 'path/to/star/rating/star-rating.module';
@NgModule({
  ...
  imports: [
    ...
    StarRatingModule
    ...
  ]
  ...
})
export class AppModule { }

第 4 步：更新 HTML

<star-rating-comp
         [size]="'large'"
         [rating]="3"
         [text]="'Rating:'"
         (onRatingChange)="crtl.onRatingChange($event)">
 </star-rating-comp>