Angular2/Typcript Pull to Refresh

Question

В настоящее время я использую Angular2/Typcript/PhoneGap в мобильном проекте и пытаюсь использовать Angular2 для достижения функциональности Pull to Refresh. К сожалению, я не могу использовать Onsenui, Ionic или jQuery для решения из-за ограничений проекта.

Как довольно новый Angular dev (я вообще-то Junior Junior), мне не удалось найти примеры, которые находятся в Angular2/Typcript (и не используют вышеуказанные рамки). Большинство существующих библиотек кажутся 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, чтобы избежать спама в эмитенте события.

Надеюсь, это поможет вам.