ionic上でサブページに一覧表示を作る

ionicアプリ上にマップを表示したので、同じオープンデータの情報を別ページに一覧表示する方法について調べました。

サブページの作成

まずサブページを作成します。 ターミナルなどで

 $ ionic generate page SubPage

と打つとsrc/pages以下にsubフォルダが作成されます。 次にモジュールを宣言するため、app.module.ts内でSubPageを宣言します。

import {SubPage} from "../pages/sub/sub';

そしてdeclarationsとentryComponentsプロパティの要素にSubPageを追加します。

サブページに一覧表示をつくる

次に先程作成したサブページのsub.htmlに以下のコードを書きます。

<ion-header>
  <ion-navbar>
    <ion-title>Lists</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>aaaaaa</ion-item>
    <ion-item>bbbbbb</ion-item>
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    <ion-item>zzzzzz</ion-item>
  </ion-list>
</ion-content>

サブページへの遷移

最後に、HomePageにクリックするとSubPageに遷移するボタンをつけます。 home.tsで

goSubPage(){
 this.navCtrl.setRoot(SubPage);
}

そしてSubPageのインポートについても

import { SubPage } from '../sub/sub';

のように宣言します。 この関数がボタンをクリックしたときに呼ばれるようにするため、home.htmlのの上に以下を追加します。

<button ion-button (click)="goSubPage()">次ページへ</button>

今回参考にさせていただいたサイトはこちらです。

Ionic入門　ファイル構造解説、ページ追加〜画面遷移まで