Angular2/Typescript Tirer pour rafraîchir

Question

J'utilise actuellement Angular2/Typescript/PhoneGap sur un projet mobile, et j'essaie d'utiliser Angular2 pour atteindre la fonctionnalité Tirer vers Actualiser. Malheureusement, je ne peux pas utiliser Onsenui, Ionic ou jQuery pour la solution en raison des contraintes du projet.

En tant que nouveau développeur angulaire (je suis un développeur junior en général), j'ai été incapable de trouver des exemples qui sont dans Angular2/Typescript (et n'utilisent pas les frameworks ci-dessus). La plupart des bibliothèques existantes semblent être angulaires1 et abandonnées. Voir here et here.

Ma question est la suivante: est-ce que quelqu'un connaît des exemples Angular2 que je peux apprendre ou des solutions alternatives pour y parvenir? Et sinon, ma meilleure option est-elle d'apprendre Angular1 assez bien pour convertir un de ces projets abandonnés en Angular2?

Answer 1

Vous devriez certainement jeter un coup d'œil aux bases de l'angulaire 1. Puisque angular2 est encore jeune, dans l'avenir, vous devrez peut-être implémenter certaines fonctionnalités qui ne sont pas déjà disponibles. Pour l'instant, j'ai créé une implémentation naïve de la première bibliothèque que vous avez liée.

@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; 
    } 

} 

Et voici une utilisation de base

@Component({ 
    selector: 'app', 
    template: ` 
     <ptr-container (onPull)="onPull()" [refresh]="isInProgress"></ptr-container> 
    ` 
}) 
export class AppComponent { 

    isInProgress:boolean = false; 

    onPull() { 
     this.isInProgress = true; 
    } 

} 

Je ne l'ai pas testé la bibliothèque de base mais cela devrait fonctionner. Vous devrez peut-être annuler la méthode onScroll pour éviter le spam de l'émetteur d'événements.

J'espère que cela vous aidera.