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アプリ開発編 |
コメント