【Ionic】新規ページの作成

Ionicで新規ページを作成する方法についてまとめました。

【ページ】新規作成

① 以下のコマンドを実行します。

ionic generate page NewPage

② src/pages/page直下にnew-pageフォルダが作成されます、
page1フォルダ内には以下のファイルが生成されます。

new-page
|- new-page.html
|- new-page.scss
|- new-page.ts
|- new-page.module.ts

③ モジュールの宣言をapp.module.tsで一括管理する場合は、「new-page.module.ts」を削除します。

④ app.module.ts内でNewPageを宣言します。
■app.module.ts

import { NewPage } from '../pages/new-page/new-page';

⑤declarationsとentryComponentsプロパティの要素にNewPageを追加します。

【新規ページ】ボタンタップで遷移

NewPageに遷移するボタンをホーム画面に設置します。

■home.ts

toNewPage() {
  this.navCtrl.setRoot(NewPage);
}


import { NewPage } from '../new-page/new-page';

■home.html

<button ion-button (click)="toNewPage()">次ページへ</button>
関連記事
1 【Ionic入門】Androidアプリ開発編
関連記事