This guide covers how the page life cycle works in an tiện ích built with Ionic và Angular.
Bạn đang xem: Ionic là gì? tổng quan về ionic framework
Angular Life Cycle Events
Ionic embraces the life cycle events provided by Angular. The two Angular events you will find using the most are:
|ngOnInit||Fired once during component initialization. This event can be used to initialize local members and make calls into services that only need to lớn be done once.|
|ngOnDestroy||Fired right before Angular destroys the view. Useful for cleanup like unsubscribing from observables.|
For more info on the Angular Component Life Cycle events, visit theircomponent lifecycle docs.
Components that useion-nav or ion-router-outlet should not use the OnPush change detection strategy. Doing so will prsự kiện lifecycle hooks such asngOnInit from firing. Additionally, asynchronous state changes may not render properly.
Ionic Page Events
In addition to lớn the Angular life cycle events, Ionic Angular provides a few additional events that you can use:
|ionViewWillEnter||Fired when the component routing to is about khổng lồ animate into lớn view.|
|ionViewDidEnter||Fired when the component routing to has finished animating.|
|ionViewWillLeave||Fired when the component routing from is about to lớn animate.|
|ionViewDidLeave||Fired when the component routing to has finished animating.|
The difference betweenionViewWillEnter andionViewDidEnter is when they fire. The former fires right afterngOnInit but before the page transition begins, và the latter directly after the transition ends.
For ionViewWillLeave andionViewDidLeave, ionViewWillLeave gets called directly before the transition away from the current page begins, andionViewDidLeave sầu does not get called until after the new page gets successfully transitioned into (after the new pagesionViewDidEnter fires).
How Ionic Handles the Life of a Page
Ionic has its router outlet, called. This outlet extends Angular"s with some additional functionality khổng lồ enable better experiences for Mobile devices.
When an app is wrapped in , Ionic treats navigation a bit differently. When you navigate to lớn a new page, Ionic will keep the old page in the existing DOM, but hide it from your view và transition the new page. The reason we vày this is two-fold:
1) We can maintain the state of the old page (data on the screen, scroll position, etc..)2) We can provide a smoother transition baông xã lớn the page since it is already there & doesn"t need lớn be recreated.
Pages are only removed from the DOM when they are "popped", for instance, by pressing the baông xã button in the UI or the browsers bachồng button.
Because of this special handling, the ngOnInit andngOnDestroy methods might not fire when you would usually think they should.
ngOnInit will only fire each time the page is freshly created, but not when navigated baông xã lớn the page. For instance, navigating between each page in a tabs interface will only Gọi each page"sngOnInit method once, but not on subsequent visits.ngOnDestroy will only fire when a page "popped".
In Ionic 3, there were a couple of additional life cycle methods that were useful to control when a page could be entered (ionViewCanEnter) và left (ionViewCanLeave). These could be used lớn protect pages from unauthorized users and to lớn keep a user on a page when you don"t want them to leave (like during a size fill).
These methods were removed in Ionic 4 in favor of using Angular"s Route Guards.
A route guard helps determine if a particular action can be taken against a route. They are classes that implement a certain interface. TheCanActivate và CanDeactivate interfaces can be used to implement the same type of xúc tích that the removed eventsionViewCanEnter andionViewCanLeave did.
Injectable()export class AuthGuard implements CanActivate constructor(private authService: AuthService) canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) return this.authService.isAuthenticated();
To use this guard, add it khổng lồ the appropriate param in the route definition:
path: "settings", canActivate:
For more info on how to use route guards, go lớn Angular"s router documentation.
Guidance for Each Life Cycle Method
Below are some tips on uses cases for each of the life cycle events.ngOnInit - Initialize your component & load data from services that don"t need refreshing on each subsequent visit.ionViewWillEnter - SinceionViewWillEnter is called every time the view is navigated lớn (regardless if initialized or not), it"s a good method to lớn load data from services. However, if your data comes back during the animation, it can start lots of DOM manipulation, which can cause some janky animations.ionViewDidEnter - If you see performance problems from usingionViewWillEnter when loading data, you can vì your data calls inionViewDidEnter instead. This event won"t fire until after the page is visible by the user, however, so you might want to use either a loading indicator or a skeleton screen, so content doesn"t flash in un-naturally after the transition is complete.ionViewWillLeave - Can be used for cleanup, like unsubscribing from observables. SincengOnDestroy might not fire when you navigate from the current page, put your cleanup code here if you don"t want it active sầu while the screen is not in view.ionViewDidLeave sầu - When this sự kiện fires, you know the new page has fully transitioned in, so any súc tích you might not normally bởi vì when the view is visible can go here.ngOnDestroy - Cleanup ngắn gọn xúc tích for your pages that you don"t want to clean up inionViewWillLeave sầu.