如何在 Angular/TypeScript 项目中使用 IScroll [英] How to use IScroll in an Angular / TypeScript project

问题描述

我有一个 Angular (Ionic) 应用程序，我需要桌面动量滚动(在 Electron 内运行).

这样做的一种有前途的方法可能是使用

解决方案

我知道，已经 3 年过去了.但我今天遇到了类似的需求，发现了这个:https://www.npmjs.com/包/@types/iscroll

只需将它添加到依赖项，它就会创建一个 Typescript 填充器

I have an Angular (Ionic) application where I need momentum scrolling for desktop (running inside Electron).

One promising way of doing this may be to use IScroll, however I cannot get this to load.

I have installed so I have the following in my package.json

 "iscroll": "^5.2.0",

and also installed the typings via npm install @types/iscroll@5.2.1

First, I could not import, I get an error [ts] File 'd:/dev/capacitor/electron2/node_modules/@types/iscroll/index.d.ts' is not a module.

I then tried adding the following to the bottom of iscroll/index.d.ts..

export {IScroll};

It now seemed to remove the error .

I now added the following code:

 public ngAfterViewInit() {
   var wrapper = document.getElementById('wrapper');
   var myScroll = new IScroll(wrapper);
 }

(I know I shoud, and will, use @ViewChild() just trying to get it working initially)

This builds ok,but when I go to the test page, I get the following error..

        Error: Uncaught (in promise): TypeError: __WEBPACK_IMPORTED_MODULE_3_iscroll__.IScroll is not a constructor
    TypeError: __WEBPACK_IMPORTED_MODULE_3_iscroll__.IScroll is not a constructor
        at ListPage.webpackJsonp.190.ListPage.ngAfterViewInit (http://localhost:8100/build/main.js:114:24)
        at callProviderLifecycles (http://localhost:8100/build/vendor.js:13122:18)

IN the type definition, we do have the following...

declare class IScroll {
  constructor (element: string, options?: IScrollOptions);
  constructor (element: HTMLElement, options?: IScrollOptions);

Does anyone know how to get this working?

Thanks in advance for any help!

[UPDATE1] My next attempt was to remove the export from the type definition, try and import as follows.

import  'iscroll';

The app builds and run with no TypeScript error, until we enter the page that instantiates the IScroll, where error now becomes

    Error: Uncaught (in promise): ReferenceError: IScroll is not defined
    ReferenceError: IScroll is not defined
        at ListPage.webpackJsonp.190.ListPage.ngAfterViewInit (http://localhost:8100/build/main.js:116:24)
        at callProviderLifecycles (http://localhost:8100/build/vendor.js:13122:18)

So, still no where.

[UPDATE2]

Tried the suggestions from @Jamshed

 import * as IScroll from 'iscroll'; or
 import IScroll from 'iscroll'; or
 import { IScroll } from 'iscroll'

All of these give

[ts] File 'd:/dev/capacitor/electron2/node_modules/@types/iscroll/index.d.ts' is not a module

I did try just adding the "old way".

So in index.html I added

<script src='D:/dev/capacitor/electron2/node_modules/iscroll/build/iscroll-lite.js'></script>

and then the declare var IScroll: any; in the ts component file.

But once again I get

Error: Uncaught (in promise): ReferenceError: IScroll is not defined
    ReferenceError: IScroll is not defined

at runtime.

[UPDATE3]

I found this post, but if I copy his index.d.ts file into mine, I still cannot import {IScroll}. I can see a number of other exports, in there, but not IScroll...

解决方案

I know, already 3 years passed. But i ran into similar need today and found this: https://www.npmjs.com/package/@types/iscroll

Just add it to dependencies it will create a Typescript filler

这篇关于如何在 Angular/TypeScript 项目中使用 IScroll的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！