javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 10:01:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(angular): strongly type Ionic lifecycle hooks (#18044)

Browse Source 
closes #18043
This commit is contained in:
Haidar Zeineddine
2020-05-27 23:42:34 +03:00
committed by GitHub
parent 29d208de88
commit 53fc8e37c8
7 changed files with 48 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
angular/src/index.ts
View File

@ -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';

31
angular/src/types/ionic-lifecycle-hooks.ts Normal file
View File

@ -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;
}

4
angular/test/test-app/src/app/modal-example/modal-example.component.ts
View File

@ -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;

4
angular/test/test-app/src/app/router-link-page/router-link-page.component.ts
View File

@ -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;

4
angular/test/test-app/src/app/router-link/router-link.component.ts
View File

@ -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;

3
angular/test/test-app/src/app/virtual-scroll-detail/virtual-scroll-detail.component.ts
View File

@ -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;

10
core/src/components/router-outlet/readme.md
View File

@ -13,11 +13,11 @@ Routes rendered in a Router Outlet have access to specific Ionic events that are
| 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. |
|--------------------|--------------------------------------------------------------------|
| `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.