ionic で 次のページへリンクする / 遷移したページに戻るボタンをつける

https://localhost/posts/https://localhost/posts-show/123 への画面遷移を考えてみます。

* 1. posts-show ページの作成

ionic generate page posts-show

* 2. ルーティング posts-show/123 を受けれるようにする

app/posts-show/posts-show-routing.module.ts

const routes: Routes = [
  {
    path: ':postId',  // ● 引数を受ける変数を追加
    component: PostsShowPage
  }
];

* 3. posts.page.html からリンクを貼る。 app/posts/posts.page.ts に登録する。

app/posts/posts.page.html

	<ion-button expand="block" routerLink="/posts-show/" routerDirection="forward">詳細ページ1</ion-button>

* 4. posts-show ページに戻るボタンをつける

app/posts-show/posts-show.page.html

<ion-header>
	<ion-toolbar>
		// ● 追加 ↓
		<ion-buttons slot="start">
		    	<ion-back-button defaultHref="/posts"></ion-back-button>
		</ion-buttons>
		// ● 追加 ↑
		<ion-title>posts-show</ion-title>
	</ion-toolbar>
</ion-header>

デフォルトのリンク先(/posts)をつけておきます。
https://ionicframework.com/jp/docs/api/back-button

No.1679
01/24 13:29

edit