Angular2/Typescript 下拉刷新

Question

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

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

我的问题是：有谁知道我可以从中学习的任何 Angular2 个示例或实现此目的的替代解决方案？如果没有，我学习 Angular1 的最佳选择是否足以将这些废弃项目之一转换为 Angular2？

Answer 1

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

希望对您有所帮助。

Angular2/Typescript 下拉刷新

Angular2/Typescript Pull to Refresh

mobile

cordova

typescript

pull-to-refresh

angular