Angular2/Typescript 拉取刷新

Question

我目前在一个移动项目上使用 Angular2/Typescript/PhoneGap，并尝试使用 Angular2 来实现 Pull to Refresh 功能。不幸的是，由于项目限制，我无法使用 Onsenui、Ionic 或 jQuery 作为解决方案。

作为一个相当新的 Angular 开发人员（我通常是初级开发人员），我一直无法找到 Angular2/Typescript 中的任何示例（并且不使用上述框架）。大多数现有的库似乎都是 Angular1 并且被废弃了。请参阅here 和here。

我的问题是：有没有人知道我可以学习的任何 Angular2 示例或替代解决方案来完成此任务？如果没有，我最好的选择是学习 Angular1 足以将这些废弃项目之一转换为 Angular2 吗？

Answer 1

你绝对应该看看 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 方法进行去抖动以避免向事件发射器发送垃圾邮件。

希望对你有帮助。