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拉到刷新

回答

相关问题