ionic v3 → v4 での ionViewCanLeave の書き換え

ionic v4 で ionViewCanLeave が無くなったので、代わりにどう書けばいいか苦労したのでメモ。

まずservice を作成。
can-deactivate-guard.service.ts

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';

export interface DeactivationGuarded {
  canDeactivate(): Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<DeactivationGuarded> {
  canDeactivate(component: DeactivationGuarded): Observable<boolean> | Promise<boolean> | boolean {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}


つぎに ionViewCanLeave を使用していたページ(たとえば TestPage)に “implements DeactivationGuarde” を追加し、”canDeactivate()” メソッドを記述する。

import { DeactivationGuarded } from '../services/can-deactivate-guard.service';

export class TestPage implements OnInit, DeactivationGuarded {

// このメソッドが ionViewCanLeave に相当する。
canDeactivate(): boolean | Observable<boolean> | Promise<boolean> {
  return true;  // false を返すとページの遷移をキャンセルできる。
}

そのページの routing-module.ts (上の例なら test-routing.module.ts)に “canDeactivate: [CanDeactivateGuard]” を記述。

import { CanDeactivateGuard } from '../services/can-deactivate-guard.service';

const routes: Routes = [  {
    path: '',
    component: TestPage,
    canDeactivate: [CanDeactivateGuard]
  }];

最後に、app.module.ts の providers に “CanDeactivateGuard” を追加する。