From 53fc8e37c89cea793d0e00246d52805166730108 Mon Sep 17 00:00:00 2001 From: Haidar Zeineddine Date: Wed, 27 May 2020 23:42:34 +0300 Subject: [PATCH] feat(angular): strongly type Ionic lifecycle hooks (#18044) closes #18043 --- angular/src/index.ts | 3 ++ angular/src/types/ionic-lifecycle-hooks.ts | 31 +++++++++++++++++++ .../modal-example/modal-example.component.ts | 4 +-- .../router-link-page.component.ts | 4 +-- .../app/router-link/router-link.component.ts | 4 +-- .../virtual-scroll-detail.component.ts | 3 +- core/src/components/router-outlet/readme.md | 12 +++---- 7 files changed, 48 insertions(+), 13 deletions(-) create mode 100644 angular/src/types/ionic-lifecycle-hooks.ts diff --git a/angular/src/index.ts b/angular/src/index.ts index de9f90f2c1..47bb6ad813 100644 --- a/angular/src/index.ts +++ b/angular/src/index.ts @@ -36,6 +36,9 @@ export { GestureController } from './providers/gesture-controller'; // ROUTER STRATEGY export { IonicRouteStrategy } from './util/ionic-router-reuse-strategy'; +// TYPES +export * from './types/ionic-lifecycle-hooks'; + // PACKAGE MODULE export { IonicModule } from './ionic-module'; diff --git a/angular/src/types/ionic-lifecycle-hooks.ts b/angular/src/types/ionic-lifecycle-hooks.ts new file mode 100644 index 0000000000..7720e7fa7e --- /dev/null +++ b/angular/src/types/ionic-lifecycle-hooks.ts @@ -0,0 +1,31 @@ +/** + * https://ionicframework.com/docs/api/router-outlet#life-cycle-hooks + */ + +export interface ViewWillEnter { + /** + * Fired when the component routing to is about to animate into view. + */ + ionViewWillEnter(): void; +} + +export interface ViewDidEnter { + /** + * Fired when the component routing to has finished animating. + */ + ionViewDidEnter(): void; +} + +export interface ViewWillLeave { + /** + * Fired when the component routing from is about to animate. + */ + ionViewWillLeave(): void; +} + +export interface ViewDidLeave { + /** + * Fired when the component routing to has finished animating. + */ + ionViewDidLeave(): void; +} diff --git a/angular/test/test-app/src/app/modal-example/modal-example.component.ts b/angular/test/test-app/src/app/modal-example/modal-example.component.ts index b19f8c585c..c3df86b1cc 100644 --- a/angular/test/test-app/src/app/modal-example/modal-example.component.ts +++ b/angular/test/test-app/src/app/modal-example/modal-example.component.ts @@ -1,11 +1,11 @@ import { Component, Input, NgZone, OnInit, Optional } from '@angular/core'; -import { ModalController, NavParams, IonNav } from '@ionic/angular'; +import { ModalController, NavParams, IonNav, ViewWillLeave, ViewDidEnter, ViewDidLeave } from '@ionic/angular'; @Component({ selector: 'app-modal-example', templateUrl: './modal-example.component.html', }) -export class ModalExampleComponent implements OnInit { +export class ModalExampleComponent implements OnInit, ViewWillLeave, ViewDidEnter, ViewWillLeave, ViewDidLeave { @Input() value: string; diff --git a/angular/test/test-app/src/app/router-link-page/router-link-page.component.ts b/angular/test/test-app/src/app/router-link-page/router-link-page.component.ts index 74149e8a48..0566980406 100644 --- a/angular/test/test-app/src/app/router-link-page/router-link-page.component.ts +++ b/angular/test/test-app/src/app/router-link-page/router-link-page.component.ts @@ -1,11 +1,11 @@ import { Component, OnInit, NgZone } from '@angular/core'; -import { IonRouterOutlet } from '@ionic/angular'; +import { IonRouterOutlet, ViewDidEnter, ViewDidLeave, ViewWillLeave } from '@ionic/angular'; @Component({ selector: 'app-router-link-page', templateUrl: './router-link-page.component.html', }) -export class RouterLinkPageComponent implements OnInit { +export class RouterLinkPageComponent implements OnInit, ViewWillLeave, ViewDidEnter, ViewWillLeave, ViewDidLeave { onInit = 0; willEnter = 0; diff --git a/angular/test/test-app/src/app/router-link/router-link.component.ts b/angular/test/test-app/src/app/router-link/router-link.component.ts index 6c7d94adcf..ac771a78e9 100644 --- a/angular/test/test-app/src/app/router-link/router-link.component.ts +++ b/angular/test/test-app/src/app/router-link/router-link.component.ts @@ -1,12 +1,12 @@ import { Component, NgZone, OnInit } from '@angular/core'; -import { NavController } from '@ionic/angular'; +import { NavController, ViewDidEnter, ViewDidLeave, ViewWillEnter, ViewWillLeave } from '@ionic/angular'; import { Router } from '@angular/router'; @Component({ selector: 'app-router-link', templateUrl: './router-link.component.html', }) -export class RouterLinkComponent implements OnInit { +export class RouterLinkComponent implements OnInit, ViewWillEnter, ViewDidEnter, ViewWillLeave, ViewDidLeave { onInit = 0; willEnter = 0; diff --git a/angular/test/test-app/src/app/virtual-scroll-detail/virtual-scroll-detail.component.ts b/angular/test/test-app/src/app/virtual-scroll-detail/virtual-scroll-detail.component.ts index f8cd21680d..8b57497191 100644 --- a/angular/test/test-app/src/app/virtual-scroll-detail/virtual-scroll-detail.component.ts +++ b/angular/test/test-app/src/app/virtual-scroll-detail/virtual-scroll-detail.component.ts @@ -1,11 +1,12 @@ import { Component, NgZone, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; +import { ViewDidEnter, ViewDidLeave, ViewWillEnter, ViewWillLeave } from '@ionic/angular'; @Component({ selector: 'app-virtual-scroll-detail', templateUrl: './virtual-scroll-detail.component.html', }) -export class VirtualScrollDetailComponent implements OnInit { +export class VirtualScrollDetailComponent implements OnInit, ViewWillEnter, ViewDidEnter, ViewWillLeave, ViewDidLeave { onInit = 0; willEnter = 0; diff --git a/core/src/components/router-outlet/readme.md b/core/src/components/router-outlet/readme.md index c31deddd2c..7239d64124 100644 --- a/core/src/components/router-outlet/readme.md +++ b/core/src/components/router-outlet/readme.md @@ -12,12 +12,12 @@ Although router outlet has methods for navigating around, it's recommended to us Routes rendered in a Router Outlet have access to specific Ionic events that are wired up to animations -| Event Name | Trigger | -|--------------------|------------------------------------------------------------------| -| `ionViewWillEnter` | Fired when the component being routed to is about to animate in. | -| `ionViewDidEnter` | Fired when the component being routed to has animated in. | -| `ionViewWillLeave` | Fired when the component being routed from is about to animate. | -| `ionViewDidLeave` | Fired when the component being routed from has animated. | +| Event Name | Trigger | +|--------------------|--------------------------------------------------------------------| +| `ionViewWillEnter` | Fired when the component routing to is about to animate into view. | +| `ionViewDidEnter` | Fired when the component routing to has finished animating. | +| `ionViewWillLeave` | Fired when the component routing from is about to animate. | +| `ionViewDidLeave` | Fired when the component routing to has finished animating. | These event tie into Ionic's animation system and can be used to coordinate parts of your app when a Components is done with it's animation. These events are not a replacement for Angular's own event system, but an addition.