IScroll을 Angular 2/Typescript로 사용하십시오.

Question

iscroll이라는 Javascript 라이브러리를 사용하고 싶습니다.

지금까지는 iscroll.d.ts가 있었는데 이제는 그것을 사용하고 싶지만 typescript에서 iam을 사용하고 어떻게 할 지 모릅니다.

// 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; 
} 

그리고 내 코너 2 page.ts은 다음과 같습니다 :

내 iscroll.d.ts

은 다음과 같습니다

가져 오기가 잘 작동

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; 

지금까지, 나는 생각하지만 난 iscroll을 초기화하고 사용하는 방법을 모른다.

희망 너희 중 몇은 어떻게 당신은 또한 유형을 포함 할 수 차이, 보통 오래된 자바 스크립트를 사용하는 것처럼 삶 : 당신은 그것을 사용

Answer 1

에 그것을 가지고 어떤 조언을 얻었다. 예를 들어

, 자바 스크립트 :

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

타이프 :

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

합니다 (: IScroll이 필요하지 않은 것을 알 컴파일러가 타입을 추론 할 수 있지만이 점을에 추가 귀하의 경우)

:

export class OnboardingPage { 
    iScroll: IScroll; 

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

,536 이 도움이

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

희망 :

이 코드는 iscroll 네임 스페이스를 사용하는 데 필요한 자신의 문서 (https://github.com/cubiq/iscroll) 그러나 당신이 게시 .d.ts 파일에 따라 기반으로합니다.