web-dev-qa-db-ja.com

ionic履歴はどのように機能し、非ルートスタックはいつ作成されますか？

ionic v1.0.0を使用していますが、_$ionicHistory_によって管理される並列履歴の動作方法がわかりません。

特にAndroidデバイスで、（以前のハードウェア-）戻るボタンを使用すると、私のAngularアプリは時々奇妙に振る舞うので、その理由を知りたい。例：戻ると、$ionicGoBack()で閉じられたビューが開きます。

私にとっては、UIルーターナビゲーションのいくつかは新しい履歴スタックを作成し、他のものは状態からIMOが記録されている履歴に追加する必要がある場合でも、履歴アイテムをルート履歴に配置するようです。

質問

  • 誰が_ui-sref_または$state.go(...)のいずれの場合に履歴項目を新しく作成されたスタックに追加するか説明できますか？
  • それらはいつrootに追加されますか？
  • モーダルは特別な方法で扱われますか？

より具体的ではないことを申し訳ありませんが、アプリはかなり複雑で、1つのプランカーで問題を特定する方法がわかりません。たぶん私は良いドキュメントの一部を見逃した...

angularjsangular-ui-routerionic-framework
37
hgoebl

質問している情報がすべて見つからない場合でも、この質問に答えようとします。

多くの人々-私も含めて-ナビゲーションシステムと歴史がどのように機能するかを理解するのに苦労しているようです。

私は question に答えました。なぜ物事が期待通りに機能しないのかを説明しようとしています。ナビゲーションは、ユーザーがコレクションを使用してアクセスした各ビューを追跡しているようです。実際、_$ionicHistory_オブジェクトには2つのコレクションがあります。最初の$ionicHistory.viewHistory().viewsは現在のスタック内の各訪問済みビューを追跡しているように見え、他の$ionicHistory.viewHistory().historiesはアプリ全体のすべての履歴を追跡しているようです。

タブ、サイドメニュー、または通常のビューにはさまざまな種類の履歴があります。

この codepen で、並列独立履歴がどのように機能するかを確認できます。
そこには2つの異なる履歴があります。 1つは[ホーム]タブ用で、2つ目は[概要]タブ用です。

各タブのサブアイテムをナビゲートして前のタブに戻ると、ナビゲーションシステムが前の状態を記憶していることがわかります。

別の plunker を用意しました。ここでは、ページに表示される詳細を使用してナビゲーションがどのように機能するかを確認できます。

ビューのコレクション$ionicHistory.viewHistory().viewsは、ユーザーが新しいページにアクセスするたびに更新されます（コレクション内の現在のビューは角括弧で囲まれています）。

ビューがコレクションに追加されている場合、再度追加されることはありません（追加すべきではありません）。

履歴をクリアする（$ionicHistory.clearHistory()）動作を変更したり、現在の履歴のルートを設定したりできます。

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

プランカーの請求書ページには、緑色のボタン（その他のルートビュー）があります。押すと、新しい履歴ルートを設定し、状態を変更します。

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

物事は期待どおりに機能し、実際には現在、背面ビューがなく、スタックには現在のビューのみが含まれています。

シーケンスを試みると、物事が台無しになります：

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

Ionicはシーケンスの制御を失い、コレクションにビューを追加し続けているようです。

現在の履歴のルートにいるので、ホームボタンを押すと、戻るボタンがクリアされますが、それは起こりません。

同じパターンを繰り返し使用すると、コレクションのサイズが無限に増加します。

これは正しい動作ではなく、修正が必要だと思います。

質問に戻ります。

Android=の戻るボタンは機能します...これは同じパターンに従うことを意味します。

幸い、モーダルは通常のビューとして扱われず、コレクションには影響しません。

31
LeftyX

前の投稿への追加情報として。

履歴スタックは、常に「ion-nav-view」テンプレートにリンクされます。したがって、最初の「ion-nav-view」項目に対してルート履歴スタックが作成されます。

異なる履歴スタックの使用を計画している場合は、ion-nav-viewをビュー名に常にリンクすることをお勧めします：<ion-nav-view name="default"></ion-nav-view> の代わりに <ion-nav-view></ion-nav-view>

これで CodePen タブページと他のページ（ "tabs"、 "other"、 "other1"という名前）のRootStackがあり、タブページ内に各タブの1つのサブスタックがあります。タブページおよびその他のページは、ルートイオンナビビュー内で実行されます。テスト中、ルートion-nav-viewに名前を割り当て、コントローラーでこのビュー名を参照する必要がありました。そうしないと、メインページを切り替えるときにスタックが常に再作成されました（その他=>タブ=>その他=> ..）

ルートスタックのHTML：

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

コントローラ：

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

タブテンプレート内で、さまざまなタブスタックに新しいion-nav-viewを割り当てました（デフォルトのionic tabsテンプレートで行われるように）

たとえば、ホームタブ（およびホームスタック）の場合、Htmlは次のようになります（ホームページ、事実）。

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

コントローラ：

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

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

上記のcodepenのバグレポートも提出しました。誤って履歴を切り替えています。 https://github.com/driftyco/ionic/issues/4086

私は私の修正が確かではありません。問題に対処するために、履歴機能をよりグローバルに再設計する必要があるかもしれません。

3
Fabian