Skip to content

Commit 86701ec

Browse files
committed
docs(): better document ionCanLeave and ionCanEnter
closes ionic-team/ionic-site#829
1 parent 20a9390 commit 86701ec

File tree

1 file changed

+57
-21
lines changed

1 file changed

+57
-21
lines changed

src/navigation/nav-controller.ts

Lines changed: 57 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -236,33 +236,69 @@ import { ViewController } from './view-controller';
236236
* | `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 |
237237
*
238238
*
239-
* ## Asynchronous Nav Transitions
239+
* ## Nav Guards
240240
*
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:
243243
*
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+
* ){}
248249
*
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+
* }
252254
*
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+
* }
264297
* ```
265298
*
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+
*
266302
* ## NavOptions
267303
*
268304
* Some methods on `NavController` allow for customizing the current transition.

0 commit comments

Comments
 (0)