Question

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

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

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

Answer 1

你绝对应该看一下角度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方法以避免垃圾邮件事件发射器。

希望它会对你有所帮助。

Angular2 / Typescript拉动刷新

1 个答案: