javascript - 加载 angular2-infinite-scroll 时遇到困难

Question

我的应用程序出现 2 个错误:

无法加载资源:服务器响应状态为 404(未找到) http://localhost:3002/angular2-infinite-scroll

angular2-polyfills.js:1243 错误:XHR 错误(404 未找到)加载 http://localhost:3002/angular2-infinite-scroll (...)

这是有问题的页面:

import {Component} from 'angular2/core';
import {Router, CanDeactivate} from 'angular2/router';
import { InfiniteScroll } from 'angular2-infinite-scroll';

@Component({
selector: 'dapps',
directives: [ InfiniteScroll ],
templateUrl: '/app/dapps/templates/dapps.component.html',

在我的组件中进一步向下:

onScroll () {
    console.log('scrolled!!')
}

我使用以下方法安装了无限滚动 npm 包:

 npm install angular2-infinite-scroll --save

在我的组件的模板文件中:

<div class="row" infinite-scroll
        [infiniteScrollDistance]="2"
        [infiniteScrollThrottle]="500"
        (scrolled)="onScroll()">
</div>

编辑尝试:

root 上的 config.js:

System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
//map tells the System loader where to look for things
map: {
'angular2-infinite-scroll': '~/angular2-infinite-scroll'
},
//packages defines our app package
packages: {
'angular2-infinite-scroll': {
main: 'angular2-infinite-scroll.js',
defaultExtension: 'js'
}
}

});

Answer 1

您必须在 systemjs 配置中配置 angular2-infinite-scroll。请参阅示例 plunk 中的 config.js 文件:

https://plnkr.co/edit/DzKAiAxtAleIrT0tsqtj?p=preview

 map: {

   'angular2-infinite-scroll': 'node_modules/angular2-infinite-scroll'
}

并为包对象添加:

'angular2-infinite-scroll': {
  main: 'angular2-infinite-scroll.js',
  defaultExtension: 'js'
}