Angular2/Typescript最新表示に戻る

Question

現在、モバイルプロジェクトでAngular2/Typescript/PhoneGapを使用しており、Angular2を使用して[Pull to Refresh]機能を実現しようとしています。残念ながら、プロジェクトの制約のためにOnsenui、Ionic、またはjQueryをソリューションに使用することはできません。

（私は一般的なジュニア開発者です）、まったく新しいAngularデベロッパーとして、私はAngular2/Typescriptにあるサンプルを見つけることができませんでした（そして上記のフレームワークは使用しません）。既存の図書館のほとんどはAngular1であり、放棄されているようです。 hereおよびhereを参照してください。

私の質問は次のとおりです。これを達成するために私が習得できる、またはこれを解決するためのAngular2の例を知っている人はいますか？そしてもしそうでなければ、これらの放棄されたプロジェクトの1つをAngular2に変換するのに十分なだけAngular1を学ぶための最良の選択肢ですか？

Answer 1

angle1の基本を見てください。angular2はまだ若いので、将来はまだ利用できない機能を実装する必要があります。 今のところ、リンクした最初のライブラリの素朴な実装を作成しました。

@Component({ 
    selector: 'ptr-container', 
    styles: [` 
     :host { 
      display: block; 
      max-height: 50px; 
      overflow: auto; 
     } 
    `], 
    template: ` 
     <section [hidden]="!inProgress"> 
      refresh in progress ... (change it by your own loader) 
     </section> 
     <ng-content></ng-content> 
    ` 
}) 
export class PullToRefreshComponent { 
    private lastScrollTop:number = 0; 
    private isAtTop:boolean = false; 
    private element:any; 

    @Input('refresh') inProgress:boolean = false; 
    @Output() onPull:EventEmitter<any> = new EventEmitter<any>(); 

    constructor(el:ElementRef) { 
     this.element = el.nativeElement; 
    } 

    private get scrollTop() { return this.element.scrollTop || 0; } 

    @HostListener('scroll') 
    @HostListener('touchmove') 
    onScroll() { 
     if(this.scrollTop <= 0 && this.lastScrollTop <= 0) { 
      if(this.isAtTop) this.onPull.emit(true); 
      else this.isAtTop = true; 
     } 
     this.lastScrollTop = this.scrollTop; 
    } 

} 

そして、ここでの基本的な使い方は、私は基本的なライブラリをテストしていませんが、これは作品べき

@Component({ 
    selector: 'app', 
    template: ` 
     <ptr-container (onPull)="onPull()" [refresh]="isInProgress"></ptr-container> 
    ` 
}) 
export class AppComponent { 

    isInProgress:boolean = false; 

    onPull() { 
     this.isInProgress = true; 
    } 

} 

です。 onScrollメソッドをデバウンスして、イベントエミッタをスパムしないようにする必要があります。

ご希望の場合はお手伝いします。