web-dev-qa-db-fra.com

Comment fonctionne l'historique ionic et quand une pile non root est-elle créée?

J'utilise ionic v1.0.0 et je ne comprends pas comment fonctionne l'historique parallèle géré par $ionicHistory.

Surtout sur les appareils Android, lorsque vous utilisez le bouton de retour (anciennement matériel), mon application Angular se comporte parfois de manière étrange et j'aimerais comprendre pourquoi. ( exemple: revenir en arrière ouvre une vue fermée par $ionicGoBack() il y a longtemps)

Pour moi, il semble que certaines des navigations ui-router créent de nouvelles piles d'historique et d'autres placent les éléments d'historique dans l'historique racine, même lorsque le passage d'un état à un sous-état devrait s'ajouter à l'historique où l'état est enregistré IMO.

Questions

  • Quelqu'un peut-il expliquer dans quels cas ui-sref Ou $state.go(...) ajouter des éléments d'historique à une pile nouvellement créée?
  • Quand sont-ils ajoutés à root?
  • Les modaux sont-ils traités d'une manière spéciale?

Désolé de ne pas être plus précis, mais l'application est plutôt compliquée et je ne sais pas comment isoler les problèmes en un seul plunkr. Peut-être que j'ai raté une bonne documentation ...

angularjsangular-ui-routerionic-framework
37
hgoebl

Je vais essayer de répondre à cette question même si vous ne trouvez pas toutes les informations que vous demandez.

Beaucoup de gens - y compris moi-même - semblent avoir du mal à comprendre comment le système de navigation et l'histoire fonctionnent.

J'ai répondu à une question plus tôt en essayant d'expliquer pourquoi les choses ne fonctionnent pas comme prévu. Il semble que la navigation garde une trace de chaque vue que l'utilisateur a visitée à l'aide d'une collection. En fait, il y a 2 collections dans l'objet $ionicHistory. Le premier $ionicHistory.viewHistory().views semble garder une trace de chaque vue visitée dans la pile actuelle tandis que l'autre $ionicHistory.viewHistory().histories garde une trace de tous les historiques de l'application entière.

Vous pouvez avoir différents types d'historique pour les onglets, les menus secondaires ou les vues régulières.

Vous pouvez voir comment les histoires indépendantes parallèles fonctionnent dans ce codepen .
Il y a 2 histoires différentes là-bas. L'un est pour l'onglet Accueil et le second pour l'onglet À propos.

En parcourant les sous-éléments de chaque onglet et en revenant à l'onglet précédent, vous remarquerez que le système de navigation se souvient de l'état précédent.

J'ai préparé un autre plunker ici où vous pouvez voir comment la navigation fonctionne avec quelques détails affichés dans la page.

La collection de vues $ionicHistory.viewHistory().views est mise à jour à chaque fois que l'utilisateur visite une nouvelle page (la vue actuelle de la collection est placée entre crochets).

Si la vue a été ajoutée à la collection, elle ne sera pas (elle ne devrait pas) être ajoutée à nouveau.

Vous pouvez modifier le comportement en effaçant l'historique ($ionicHistory.clearHistory()) ou en définissant la racine de l'historique en cours:

$ionicHistory.nextViewOptions({
    historyRoot: true
});

Dans la page Facture de mon plongeur, il y a un bouton vert (Autre vue racine). Lorsque j'appuie dessus, je définis la nouvelle racine de l'historique et change d'état:

$ionicHistory.nextViewOptions({
    historyRoot: true
});
$state.go('otherviewroot');

Les choses fonctionnent comme prévu et en fait, je n'ai plus de vue arrière et ma pile ne contient que la vue actuelle.

Les choses se gâchent lorsque vous essayez la séquence:

Home - Contacts - Invoices - Home (button in the header).

Il semble maintenant Ionic a perdu le contrôle de la séquence et continue d'ajouter des vues à la collection.

Appuyer sur le bouton d'accueil devrait effacer le bouton de retour, car nous sommes à la racine de l'historique actuel, mais cela ne se produit pas.

L'utilisation répétée du même motif augmente indéfiniment la taille de la collection.

Je suppose que ce n'est pas le bon comportement et qu'une correction est nécessaire.

Revenons à votre question.

Le bouton de retour dans Android fonctionne ... ce qui signifie qu'il suit le même modèle.

Heureusement, les modaux ne sont pas traités comme des vues régulières et n'affectent pas la collection.

31
LeftyX

Comme information supplémentaire au post précédent.

Une pile d'historique est toujours liée à un modèle "ion-nav-view". Ainsi, la pile d'historique racine est créée pour le premier élément "ion-nav-view".

Si vous prévoyez d'utiliser différentes piles d'historique, je vous conseille de toujours lier l'ion-nav-view à un nom de vue: <ion-nav-view name="default"></ion-nav-view> au lieu de <ion-nav-view></ion-nav-view>

Dans ce CodePen vous avez un RootStack pour les pages à onglet et les autres pages (nommées "tabs", "other", "other1") puis à l'intérieur des pages à onglet, vous avez une sous-pile pour chaque onglet. Les pages à onglet et les autres pages s'exécutent dans la vue Root ion-nav-view. Pendant mes tests, j'avais besoin d'attribuer un nom à la racine ion-nav-view, puis de référencer ce nom de vue dans le contrôleur. Sinon, la pile a toujours été recréée lors du basculement entre les pages principales (Autre => Tabs => Autre => ..)

HTML pour Root Stack:

<ion-nav-view name="default"></ion-nav-view>

Manette:

 .state('other', {
      url: "/other",
      views: {
        'default': {
          templateUrl:       "templates/other.html",
        }
        },
.state('tabs', {
      url: "/tab",
      abstract: true,
     views: {
        'default': {
          templateUrl:       "templates/tabs.html",
        }
     }
    })

À l'intérieur du modèle d'onglets, j'ai affecté une nouvelle vue ion-nav-view pour les différentes piles d'onglets (comme cela se fait dans le modèle par défaut ionic tabs)

Par exemple, pour l'onglet home (et la pile home) le Html ressemble à ceci (pages home, faits):

<ion-nav-view name="home-tab"></ion-nav-view>

Manette:

.state('tabs.home', {
      url: "/home",
      views: {
        'home-tab': {
          templateUrl: "templates/home.html",
        },

      }
    })
    .state('tabs.facts', {
      url: "/facts",
      views: {
        'home-tab': {
          templateUrl: "templates/facts.html",
        },          
      }
    })

J'ai également soumis un rapport de bogue pour le codepen ci-dessus. Il revient à tort à travers les histoires. https://github.com/driftyco/ionic/issues/4086

Je ne suis pas sûr de ma solution. Peut-être que la fonction d'historique doit être repensée plus globalement pour résoudre les problèmes.

3
Fabian