加载 angular2-infinite-scroll 的困难

Question

我的应用出现 2 个错误：

加载资源失败：服务器响应状态为 404（未找到） http://localhost:3002/angular2-infinite-scroll

angular2-polyfills.js:1243 Error: XHR error (404 Not Found) loading 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!!')
}

我使用以下方法安装了 Infinite scroll npm 包：

 npm install angular2-infinite-scroll --save

在我拥有的组件的模板文件中：

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

尝试编辑：

根目录上的 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'
}