Question

我正在使用使用Angular 2的Angular Full堆栈，我刚开始学习它。看起来纯粹的Angular 2与Full Stack的结构完全不同，所以我遇到了一些问题，比如Angular2 & TypeScript importing of node_modules

等其他指南

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

这是我到目前为止所尝试的内容：

我想使用的外部库是https://www.npmjs.com/package/angular-star-rating（即使我已尝试过其他人）
我做“npm install angular-star-rating”
这是我被困的地方。我尝试了多种方法，例如在组件中导入它。我想使用它，在html中加载脚本，并在我的app.ts中加载模块。我没有看到system.config（来自system.js，虽然我相信它已被使用），也没有@NgModule可以在模块中加载的任何地方，所以我认为最适合的地方是app.ts.当我做“gulp serve”时，我会收到错误，例如
等错误 ./~/angular-star-rating/src/star-rating.component.ts中的错误模块解析失败：[directory]意外字符'@'（14：0）您可能需要适当的加载程序来处理此文件类型。 SyntaxError：意外字符'@'（14：0）
以下是我的项目结构的简要介绍：http://imgur.com/0AnAKBU

谢谢，非常感谢任何帮助

Answer 1

步骤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>

Answer 2

您可以这样使用：

<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

Angular Full Stack，如何使用外部库？

2 个答案: