Angular2/Typescript拉到刷新

我目前在移動項目上使用Angular2/Typescript/PhoneGap，並嘗試使用Angular2來實現Pull to Refresh功能。不幸的是，由於項目限制，我無法使用Onsenui，Ionic或jQuery作爲解決方案。Angular2/Typescript拉到刷新

作爲一個相當新的Angular開發者（我是一般的初級開發者），我一直無法找到Angular2/Typescript中的任何示例（並且不使用上述框架）。大多數現有的圖書館似乎都是Angular1並被放棄。見here和here。

我的問題是這樣的：有誰知道任何可以從中學習的Angular2示例或替代解決方案來完成此任務？如果不是的話，我最好的選擇是不是很好地學習Angular1以將其中一個被遺棄的項目轉換爲Angular2？

來源

2016-11-14 bhall

不幸的是，教程/框架問題對於StackOverflow是無關緊要的。 –

@DavidMakogon我很感激你指出，並看到相關鏈接[here]（http://stackoverflow.com/help/on-topic）。不幸的是，我想我不知道提出這樣的通用問題的適當位置。也許你有一個建議？ – bhall

您絕對應該看一下angular 1的基礎知識。由於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方法以避免發送垃圾郵件事件。

希望它能幫助你。

來源

2016-11-14 20:04:42 Polochon

非常感謝你@Polochon的回答。我想，我必須熟悉更多的Angular1這些類型的場景。這給了我很多工作/學習。 – bhall

您不必瞭解有關angular1的所有信息，只需瞭解基本概念。剩下的就是純JavaScript，所以如果你熟悉這門語言，沒有理由會花費你很多時間。 – Polochon

Angular2/Typescript拉到刷新

回答

相關問題