Quelle est la meilleure façon de mettre en œuvre balayez vers la navigation dans Angulaire 2?

Je suis nouveau sur Angulaire 2 et je suis à la recherche d'un moyen de mettre en œuvre un bon onglet touche de balayage de navigation pour les utilisateurs mobiles avec un simple mouvement de la transition à la prochaine onglet vue.

Jusqu'à présent, j'ai trouvé un paquet appelé angular2-utile-chipeur bien que je ne suis pas vif sur l'utilisant comme j'arrive à la fin de l'initialisation de mes composants plus tôt, même s'ils ne sont pas en vue.

Que quelqu'un connait un bon moyen de mettre en œuvre un onglet balayage de la navigation fondée sur Angulaire 2? Tous les commentaires seront grandement appréciés. : )

OriginalL'auteur Jonathan002 | 2017-03-04

  1. 5

    Vous pouvez utiliser HammerJS à mettre en œuvre pour toucher les actions, Vous pouvez suivre ce plunker par exemple.

    Inclure hammer.js fichier

    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>

    ou

    npm install hammerjs --save

    Pour le navigateur support tactile avec hammerjs, comprennent

     <script src="http://cdn.rawgit.com/hammerjs/touchemulator/master/touch-emulator.js"></script>
<script>

    Importer dans l'application.le module.ts

    import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

export class MyHammerConfig extends HammerGestureConfig  {
  overrides = <any>{
    'swipe': {velocity: 0.4, threshold: 20} //override default settings
  }
}

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [{ 
    provide: HAMMER_GESTURE_CONFIG, 
    useClass: MyHammerConfig 
  }] //use our custom hammerjs config
})

    plunker lien par exemple

    Pour mettre en œuvre les onglets angular2-material est un bon endroit pour commencer, suivez ce lien

    Merci pour cette! : )
    merci pour cela,pouvez-vous pls me guider comment déplacer ma page en douceur comme app.ft.com/index_page/home à l'aide de hammerjs
    Je suis en train de faire de la navigation tout en glissant.Mais ,si j'ai navigué à une page ,son travail seulement après rechargement rechargement de la page .comment puis-je résoudre ce problème

    OriginalL'auteur Rohit Vinay

  2. 41

    Pour le balayage de détection voici une solution plus simple que d'ajouter HammerJS:

    Dans app.component.html:

    <div (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')">
  App content here
</div>

    Dans l'app.composante.ts:

    private swipeCoord?: [number, number];
private swipeTime?: number;

swipe(e: TouchEvent, when: string): void {
  const coord: [number, number] = [e.changedTouches[0].pageX, e.changedTouches[0].pageY];
  const time = new Date().getTime();

  if (when === 'start') {
    this.swipeCoord = coord;
    this.swipeTime = time;
  } else if (when === 'end') {
    const direction = [coord[0] - this.swipeCoord[0], coord[1] - this.swipeCoord[1]];
    const duration = time - this.swipeTime;

    if (duration < 1000 //
      && Math.abs(direction[0]) > 30 //Long enough
      && Math.abs(direction[0]) > Math.abs(direction[1] * 3)) { //Horizontal enough
        const swipe = direction[0] < 0 ? 'next' : 'previous';
        //Do whatever you want with swipe
    }
  }
}

    Note: j'ai essayé le HammerJS solution, mais la configuration de l'ignorer les mouvements de la souris était impossible parce que vous ne disposez pas d'un accès direct au Marteau objet. Alors la sélection du texte était de forcer la navigation à la page suivante...

    C'est putain de génial! Merci
    C'est vraiment génial. Merci pour le partage! Pour moi, il n'était pas horizontale assez. J'ai décidé de modifier l'horizontale condition (Math.abs(direction[1] *3) < Math.abs(direction[0]))
    Bonne idée @PierreChavaroche j'ai modifié le code en conséquence!
    magnifique travail!!! C'est tout simplement génial
    Incroyable! Il est aujourd'hui très fréquent d'ajouter des tonnes de dépendances et les bibliothèques de nos projets pour l'utilisation des fonctionnalités que l'on pourrait être d'écrire nous-mêmes avec quelques lignes de code. Cette solution est propre, efficace et nous libère de l'installation de hammerjs. Pour moi, c'est la bonne réponse.

    OriginalL'auteur pikiou