Verwenden Sie IScroll in Angular 2/Typescript

Question

Ich möchte eine Javascript-Bibliothek namens Iscroll verwenden.

Bisher habe ich die iscroll.d.ts und jetzt möchte ich es verwenden, aber iam neu bei Typescript und weiß nicht, wie das geht.

Meine iscroll.d.ts wie folgt aussieht:

// Generated by typings 
// Source: https://raw.githubusercontent.com/types/typed-iscroll/8524f7c88e521c16462553173c9ea99e9e3d477c/iscroll.d.ts 
declare module 'iscroll' { 
class IScroll { 
    version: string; 

    constructor(element: string | HTMLElement, options?: IScroll.IScrollOptions); 

    destroy(): void; 
    resetPosition(time: number): boolean; 
    disable(): void; 
    enable(): void; 
    refresh(): void; 
    scrollTo(x: number, y: number, time?: number, easing?: IScroll.IScrollEaseOption): void; 
    scrollBy(x: number, y: number, time?: number, easing?: IScroll.IScrollEaseOption): void; 
    scrollToElement(el: HTMLElement | string, time?: number, offsetX?: number, offsetY?: number, easing?: IScroll.IScrollEaseOption): void; 
    goToPage(x: number, y: number, time?: number, easing?: IScroll.IScrollEaseOption): void; 
    prev(): void; 
    next(): void; 
    zoom(scale: number, x: number, y: number, time?: number): void; 
    refresh(): void; 
    destroy(): void; 

    utils: IScroll.IScrollUtils; 

    // Events 
    on(type: 'beforeScrollStart' | 
    'scrollCancel' | 
    'scrollStart' | 
    'scrollEnd' | 
    'flick' | 
    'zoomStart' | 
    'zoomEnd', fn: (evt?: any) => void): void; 
    off(type: string, fn?: (evt?: any) => void): void; 

} 

namespace IScroll { 
    export interface IScrollIndicatorOptions { 
    el?: HTMLElement | string; 
    fade?: boolean; 
    ignoreBoundaries?: boolean; 
    interactive?: boolean; 
    listenX?: boolean; 
    listenY?: boolean; 
    resize?: boolean; 
    shrink?: boolean; 
    speedRatioX?: number; 
    speedRatioY?: number; 
    } 

    export interface IScrollKeyBindings { 
    pageUp?: number | string, 
    pageDown: number | string; 
    end: number | string; 
    home: number | string; 
    left: number | string; 
    up: number | string; 
    right: number | string; 
    down: number | string; 
    } 

    export interface IScrollOptions { 

    indicators?: IScrollIndicatorOptions; 

    // Scrollbar 
    scrollbars?: boolean | string; 
    fadeScrollbars?: boolean; 
    interactiveScrollbars?: boolean; 
    resizeScrollbars?: boolean; 
    shrinkScrollbars?: boolean; 

    // Zoom 
    zoom?: boolean; 
    zoomMin?: number; 
    zoomMax?: number; 
    startZoom?: number; 
    wheelAction?: string; 

    snap?: boolean | string; 

    bindToWrapper?: boolean; 
    bounceEasing?: string | IScrollEaseOption; 
    bounceTime?: number; 
    deceleration?: number; 
    mouseWheelSpeed?: number; 
    preventDefaultException?: any; 
    resizePolling?: number; 
    probeType?: number; 
    keyBindings?: boolean | IScrollKeyBindings; 

    useTransform?: boolean; 
    useTransition?: boolean; 
    HWCompositing?: boolean; 
    bounce?: boolean; 
    click?: boolean; 
    disableMouse?: boolean; 
    disablePointer?: boolean; 
    disableTouch?: boolean; 
    eventPassthrough?: boolean; 
    freeScroll?: boolean; 
    invertWheelDirection?: boolean; 
    momentum?: boolean; 
    mouseWheel?: boolean; 
    preventDefault?: boolean; 
    tap?: boolean | string; 

    scrollX?: number; 
    scrollY?: number; 
    startX?: number; 
    startY?: number; 

    // Infinite options 
    infiniteElements: HTMLElement | 'string'; 
    cacheSize: number; 
    dataset: (start: number, count: number) => Object[]; 
    } 

    export interface IScrollEaseOption { 
    style: 'string'; 
    fn: Function; 
    } 
    export interface IScrollEaseOptions { 
    quadratic: IScrollEaseOption; 
    circular: IScrollEaseOption; 
    back: IScrollEaseOption; 
    bounce: IScrollEaseOption; 
    elastic: IScrollEaseOption; 
    } 

    export interface IScrollUtils { 
    ease: IScrollEaseOptions; 
    } 
} 

export = IScroll; 
} 

Und mein Eckige 2 page.ts sieht wie folgt aus:

import {NavController} from "ionic-angular"; 
import {AngularFire, AuthProviders, AuthMethods } from "angularfire2"; 
import {OnInit, Inject, Component} from "@angular/core"; 
import {UserService} from '../../../services/UserService'; 
import {AuthPage} from "../home/home"; 
import { IScroll } from "iscroll" 

@Component({ 
    templateUrl: "build/pages/auth/onboarding/onboarding.html", 
    providers: [UserService] 
}) 

export class OnboardingPage { 

    iScroll: IScroll; 

    onboardingStep: number = 1; 

Der Import bisher gut funktioniert, ich denke, aber ich weiß nicht, wie man iscroll init und benutzt.

Hoffnung, einige von Ihnen bekam irgendwelche Tipps, wie man das Leben zu bringen :)

Answer 1

Sie es verwenden, wie Sie es in plain old Javascript verwenden würde, mit dem Unterschied, dass Sie auch Typen umfassen können.

Zum Beispiel javascript:

let myScroll = new IScroll("#CONTAINER_ID"); 

Typoskript:

let myScroll: IScroll = new IScroll("#CONTAINER_ID"); 

(feststellen, dass die : IScroll nicht benötigt wird, kann der Compiler den Typ ableiten, aber ich fügte hinzu, es einen Punkt zu machen

)

In Ihrem Fall:

export class OnboardingPage { 
    iScroll: IScroll; 

    constructor() { 
     this.iScroll = new IScroll("#CONTAINER_ID"); 
    } 
} 

Dieser Code wird auf der Grundlage ihrer Dokumentation (https://github.com/cubiq/iscroll), sondern nach dem .d.ts Datei geschrieben den iscroll Namespace verwenden erfordert:

let myScroll = new iscroll.IScroll("#CONTAINER_ID"); 

Hoffnung, das hilft.