Help us understand the problem. What is going on with this article?

Angular2とIonic2でのルーティング

More than 3 years have passed since last update.

こんにちわ。はこです。
Ionic2は、Angular2に深く依存しているとは言え、ルーティングは別々のやり方です。

まずはAngular2でのルーティング

ルーティングを使う

普通のAngularではこう書きます。

app.module.ts
import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
  { path: '', component: CrisisListComponent }, //一般的な指定。
  { path: 'hero/:id',      component: HeroDetailComponent }, //URL引数を取る
  { path: 'heroes', component: HeroListComponent, //値をrouterから挿入
    data: { title: 'Heroes List' }
  },
  { path: '', redirectTo: '/heroes', pathMatch: 'full' }, //転送
  { path: '**', component: PageNotFoundComponent } //ワイルドカード処理。
   // ワイルドカードは redirectTo と組み合わせても良いよね
];


@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes) //上記で設定したルーティングを読込
    // ...
  ],
  //...
})
export class AppModule { }

あとTemplate側に router-outletを書きましょう。

app.html
<!-- app.module.ts で設定した内容は下記に反映される -->
<router-outlet></router-outlet> 
<!--  逆に言えば、routingによらない内容は、router-outletの外に書くと良い -->

URLで指定された値を利用する

heroDetail.component.ts
import { Router, ActivatedRoute, Params } from '@angular/router';


@Component({
  //...
})
export class HeroDetailComponent {
  constructor(private route: ActivatedRoute){
    // ActiveRouteを取得
  }

  // hero/12 でURL遷移したときには…
  ngOnInit() {
    this.route.params.subscribe((params: Params) => {
      console.log(params['id']) // 12
    })
  }  
}

Ionic2でのルーティング

基本はルーティング無し

Ionicは、基本はルーティング不要と考えているようです。
アプリっぽいものを作るのであれば、ルーティングは無くても確かに困りません。
むしろルーティングがあるほうが、直URL指定の遷移によって困ることが多いかもしれません。

ルーティングを使う

そうは言っても使いたいことがは多いです。
テストやデバッグの時でも使用頻度は高いでしょう。

DeepLinkerを使います。
使い方はすごく簡単です。

app.module.ts
// ルーティング設定
const appRoutes = {
  links: [
    { component: HelloIonicPage, name: 'Home', segment: 'home' }, //一般的な指定
    { component: ItemDetailsPage, name: 'Detail', segment: 'detail/:id' } //引数あり
  ]
}

@NgModule({
  //...
  imports: [
    IonicModule.forRoot(MyApp, {}, appRoutes)
  ],
  //...
})
export class AppModule {}


これだけです! router-outletは必要ありません!

URLで指定された値を利用する

pages/item-details.ts
import { NavController, NavParams } from 'ionic-angular';

@Component({
  //...
})
export class ItemDetailsPage {

  // detail/12 でURL遷移したときには…
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    console.log(navParams.get('id')) //12
  }
}

Angular標準のより簡単な気がしますね。

遷移直後に履歴を修正:defaultHistory

面白い機能として、「直接そのページに飛んだ場合」に戻る履歴を操作するdefaultHistoryがあります。

  { component: DetailPage, name: 'Detail', segment: 'detail/:userId', defaultHistory: [HomePage] }

上記の例では、myapp.com/detail/4でアプリを起動すると、DetailPageが表示され、戻るボタンを押すとHomePageに移動します。
アプリっぽい画面では、戻るボタンを常に表示してたりするので(Homeボタンを使わない)、けっこう必要かもしれませんね!

kohashi
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away