前回私たちは新しいページの作成を完成しました.あなたはめちゃくちゃな概念に心を混乱させたかもしれませんが、あなたはそんなに頭が良くてきれいです.私はあなたがきっと時間をかけて彼らを理解したと信じています.
まず手に何ページあるか見てみましょう.

AboutPage

ContactPage

HomePage

TestPage

私たちは何をしますか?HomePageにページを置き、クリックしてTestPageにジャンプします.
どうやって?とても簡単で、3歩しか完成しません.
1.実践:好きなら注文してください
1.1開始前:前節の初期状態を復元する

ファイル:pages/tabs/tabs.ts

前回私たちは新しく作成されたTestPageを観察するために、ぼんやりと最初の画面のHomePageを置き換えました.私たちはまず彼を元の状態に戻しました.

tab 1 RootをHomePage

に再び向ける

TestPageのimport文

を削除

import { Component } from '@angular/core';

import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;

  constructor() {

  }
}

直接serveはローカルサーバーを実行して、すべてまた元のように完璧で、画面が美しすぎて見ることができません.
1.2 HomePageでボタンを作る

ファイル:pages/home/home.html

元のion-contentの内容を削除して、このようなボタンに参加します

そうですね.よく知っているbuttonラベルion-buttonは、ボタンがオペレーティングシステムに合った効果を視覚的に示すように内蔵されています.
1.3 HomePageコンポーネントへのTestPageの導入

ファイル:pages/home/home.ts

TestPage

を導入

HomePageクラスでtestPage属性を定義します.

構造関数では、テンプレートが使用できるようにtestPageをTestPageに向けた.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { TestPage } from '../test/test';

@Component({
    selector: 'page-home',
  templateUrl: './home.html'
})
export class HomePage {

  testPage;

  constructor(public navCtrl: NavController) {
      this.testPage=TestPage;
  }

}

1.4ページの一線引き

ファイル:pages/home/home.html

buttonに[navPush]指令

を加える

このときブラウザに切り替え、ホームページのボタンをクリックすると、ページがスムーズにTestに切り替わりました.
2.業務ロジックにおけるジャンプの実現
先ほど、[navPush]コマンドを使用して、テンプレートのボタンを新しいページに「ハイパーリンク」させました.しかし、より複雑なシーンでは、このような簡単なリンクは私たちのニーズに合わない可能性があります.例えば、ユーザーがボタンをクリックしたときに、いくつかの業務処理を行い、次のページにジャンプする必要があります.この場合、NavControllerのpushメソッドを使用して実現できます.同じように3つのステップしかありません.
2.1 NavControlの導入
ionicはappの多くのインタラクションをいくつかのcontrollerにカプセル化し、NavControllerはページの管理とナビゲーションに使用されるcontrollerである.ほとんどのページでNavControllerが使用されているため、HomePageに導入文があることがわかりました.

import { NavController } from 'ionic-angular';

また、クラスのコンストラクション関数は、ページ作成時にNavControllerのインスタンスを入力(注入)する必要があることをangularに伝えるNavControllerタイプのパラメータを定義する.

constructor(public navCtrl: NavController){
}

2.2 pushメソッドによるジャンプ
クラスにメソッドを記述するには、pushTestPageと呼びましょう.navCtrlオブジェクトのpushメソッドを呼び出し、ページをTestPageに移動します.

pushTestPage(){
      this.navCtrl.push(TestPage);
  }

ファイルtsの完全コード

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { TestPage } from '../test/test';

@Component({
    selector: 'page-home',
  templateUrl: './home.html'
})
export class HomePage {
  
  constructor(public navCtrl: NavController) {
  }

  pushTestPage(){
      this.navCtrl.push(TestPage);
  }

}

2.3ボタンクリックイベントにメソッドをバインドする
ホームでhtmlでbutton要素にclickイベントをバインドする

なぜonclick="pushTestPage()ではないのか.pushTestPageはグローバル関数ではなく、TestPageコンポーネントの1つの方法であり、カプセル化された後はすでに外部には見えないが、(click)コマンドを使用してコンポーネント内のメソッドを直接呼び出すことができるからだ.
これにより、pushTestPageにより複雑なビジネスロジックを追加し、ニーズを満たすことができます.
3.パラメータを次のページに渡す
あるページ上の業務を完了した後、関連するデータを次のページ処理に渡す場合、pushされたページに関連するパラメータを渡す必要があります.NavControllerのpushメソッドの2番目のパラメータは、オブジェクトを受信します.
3.1 push関数に2番目のパラメータを追加する
ページに表示するためにTestPageにタイトルを入力し、pushメソッドにオブジェクトを入力するとします.

 pushTestPage(){
      this.navCtrl.push(TestPage,{
          title:'        '
      });
  }

3.2 NavParamの導入と使用
NavParamsのgetメソッドを使用すると、転送されたページパラメータを読み込むことができます.testに切り替えます.ts,3つのステップ1を完了する.NavParamsを導入し、構造関数に注入文2を追加する.TestPageクラスにtitle属性を追加し、パラメータを読み出してtitle 3に付与.テンプレートにtitleを出力する

ファイルtest.ts

import { Component } from '@angular/core'

import { NavParams } from 'ionic-angular' //step1

@Component({
    selector: 'page-test',
    templateUrl:'./test.html'
})
export class TestPage {

    title:string; //step2

    constructor(public params:NavParams){ //step1
        this.title=this.params.get('title'); //step2
    }
}

ファイルtest.html

多くのシーンのテンプレートエンジンでは、テンプレートにカッコ{}}を使用してコンポーネントのプロパティをインタフェースに出力します.

  
    
      Test
    
  


  
  
{{title}}

4.ベテランドライバーは必ず「手動で戻る」
ページに入るように,我々はページを終了する際に,ユーザが戻るボタンをクリックするほか,業務が完了した後に,自動的に前のページに戻ることも可能であり,NavControllerのpop手法を用いて実現できる.

ファイルtest.ts

import { Component } from '@angular/core'

//    
import { NavController, NavParams } from 'ionic-angular'

@Component({
    selector: 'page-test',
    templateUrl:'./test.html'
})
export class TestPage {

    title:string;

    //    
    constructor(public navCtrl:NavController,public params:NavParams){
        this.title=this.params.get('title');
    }

    //   
    popPage(){
        this.navCtrl.pop();
    }
}

ファイルtest.html

テンプレートに戻るボタンを追加

  
    
      Test
    
  


  
{{title}}
    

5.拡張内容:ionicのページメカニズム
以前はページ間のリンクをページ上で行い、ラベルで実現していました.私たちが今作っているwebアプリは、フロントエンド技術を使っていますが、ページの概念は以前とはすべて違います.
ionicアプリはコンパイル後、実際にはindexが1つしかありません.htmlページは、単一ページアプリケーションです.あなたが見ているページ間の切り替えは、実際にはjsを利用してインタフェースの要素を置き換えており、伝統的な意味でのページ間のジャンプではありません.従来のウェブページのジャンプは、サーバにリクエストを送信してリソースをダウンロードする必要があるため、どんなに速くても応答時間があります.これはブラウザでは正常ですが、携帯アプリであれば、このような応答時間は操作のスムーズさに深刻な影響を及ぼします.単一ページはすでに基礎的な資源をロードして、操作の過程の中で、部分の内容を交換するだけで、部分の資源を要求して、いくつかのインタラクティブな設計に協力して、操作にカートン感がありません.だからモバイルウェブが盛んな今日、単一ページアプリケーションも大勢の傾向です.
ionicアプリのページは実質的にスタックの構造である(実際には多くのオリジナルアプリケーションもそうである)が、現在のページから新しいページを導入すると、ブラウザ(またはオペレーティングシステム)が新しいページのリソースをロードし、スタックのトップに追加する.インタフェースでの表現は,新しいページが既存のページを「隠した」ことであり,下層ページの内容やリソースがメモリに残っていることである.
一方、上位ページがpopで削除されると、上位ページがスタックをポップアップし、対応するメモリが解放され(図中のスタックトップがCからBになった)、視覚表現では上のページが「移動」され、下位ページが「露出」した.
そこでアプリのページには階層関係があり、ユーザーがトップページの1階1階に新しいページ(A->B->C)に入り、トップページに戻ると1階1階に退かなければならない(C->B->A)ので、ページを設計する際に頭の中でこのような階層関係が明確になり、スタックの階層が多すぎる(5階を超えた)と、ユーザー体験に迷惑をかけることになります.
最後にTabsPageについて述べると、TabsPageは特殊なページを理解することができ、このページにはいくつかのページスタック(Tab)が含まれており、各ページスタックは互いに独立しており、Tabボタンによって互いに切り替えられている.1つのページスタックのpushとpopは、他のスタックの表現に影響しません.つまり、異なるtabで切り替えると、応答するスタックトップページが表示されます.