Angular2とIonic2でのルーティング

こんにちわ。はこです。
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ボタンを使わない)、けっこう必要かもしれませんね！