You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/navigation/nav-controller.ts
+57-21Lines changed: 57 additions & 21 deletions
Original file line number
Diff line number
Diff line change
@@ -236,33 +236,69 @@ import { ViewController } from './view-controller';
236
236
* | `ionViewCanLeave` | Runs before the view can leave. This can be used as a sort of "guard" in authenticated views where you need to check permissions before the view can leave |
237
237
*
238
238
*
239
-
* ## Asynchronous Nav Transitions
239
+
* ## Nav Guards
240
240
*
241
-
* Navigation transitions are asynchronous operations. When a transition is started,
242
-
* the `push` or `pop` method will return immediately, before the transition is complete.
241
+
* In some cases, a developer should be able to control views leaving and entering. To allow for this, NavController has the `ionViewCanEnter` and `ionViewCanLeave` methods.
242
+
* Similar to Angular 2 route guards, but are more integrated with NavController. For example, if you wanted to prevent a user from leaving a view:
243
243
*
244
-
* Generally, the developer does not need to be concerned about this. In the event
245
-
* multiple transitions need to be synchronized or transition timing is critical,
246
-
* the best practice is to chain the transitions together using the return value
247
-
* from the `push` and `pop` methods.
244
+
* ```ts
245
+
* export class MyClass{
246
+
* constructor(
247
+
* public navCtrl: NavController
248
+
* ){}
248
249
*
249
-
* The `push` and `pop` methods return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
250
-
* Promises are a way to represent and chain together multiple asynchronous
251
-
* operations in order. Navigation actions can be chained together very easily using promises.
250
+
* pushPage(){
251
+
* this.navCtrl.push(DetailPage)
252
+
* .catch(()=> console.log('should I stay or should I go now'))
253
+
* }
252
254
*
253
-
* ```typescript
254
-
* let navTransitionPromise = this.navCtrl.push(Page2);
255
-
* navTransitionPromise.then(() => {
256
-
* // the transition has completed, so I can push another page now
257
-
* return this.navCtrl.push(Page3);
258
-
* }).then(() => {
259
-
* // the second transition has completed, so I can push yet another page
260
-
return this.navCtrl.push(Page4);
261
-
* }).then(() => {
262
-
* console.log('The transitions are complete!');
263
-
* })
255
+
* ionCanViewLeave(): boolean{
256
+
* // here we can either return true or false
257
+
* // depending on if we want to leave this view
258
+
* if(isValid(randomValue)){
259
+
* return true;
260
+
* } else {
261
+
* return false;
262
+
* }
263
+
* }
264
+
* }
265
+
* ```
266
+
*
267
+
* We need to make sure that or `navCtrl.push` has a catch in order to catch the and handle the error.
268
+
* If you need to prevent a view from entering, you can do the same thing
269
+
*
270
+
* ```ts
271
+
* export class MyClass{
272
+
* constructor(
273
+
* public navCtrl: NavController
274
+
* ){}
275
+
*
276
+
* pushPage(){
277
+
* this.navCtrl.push(DetailPage)
278
+
* .catch(()=> console.log('should I stay or should I go now'))
279
+
* }
280
+
*
281
+
* }
282
+
*
283
+
* export class DetailPage(){
284
+
* constructor(
285
+
* public navCtrl: NavController
286
+
* ){}
287
+
* ionCanViewEnter(): boolean{
288
+
* // here we can either return true or false
289
+
* // depending on if we want to leave this view
290
+
* if(isValid(randomValue)){
291
+
* return true;
292
+
* } else {
293
+
* return false;
294
+
* }
295
+
* }
296
+
* }
264
297
* ```
265
298
*
299
+
* Similar to `ionViewCanLeave` we still need a catch on the original `navCtrl.push` in order to handle it properly.
300
+
* When handling the back button in the `ion-navbar`, the catch is already taken care of for you by the framework.
301
+
*
266
302
* ## NavOptions
267
303
*
268
304
* Some methods on `NavController` allow for customizing the current transition.
0 commit comments