UNPKG

23.9 kBJavaScriptView Raw
1/**
2 * \@name NavController
3 * \@description
4 *
5 * NavController is the base class for navigation controller components like
6 * [`Nav`](../../components/nav/Nav/) and [`Tab`](../../components/tabs/Tab/). You use navigation controllers
7 * to navigate to [pages](#view-creation) in your app. At a basic level, a
8 * navigation controller is an array of pages representing a particular history
9 * (of a Tab for example). This array can be manipulated to navigate throughout
10 * an app by pushing and popping pages or inserting and removing them at
11 * arbitrary locations in history.
12 *
13 * The current page is the last one in the array, or the top of the stack if we
14 * think of it that way. [Pushing](#push) a new page onto the top of the
15 * navigation stack causes the new page to be animated in, while [popping](#pop)
16 * the current page will navigate to the previous page in the stack.
17 *
18 * Unless you are using a directive like [NavPush](../../components/nav/NavPush/), or need a
19 * specific NavController, most times you will inject and use a reference to the
20 * nearest NavController to manipulate the navigation stack.
21 *
22 * ## Basic usage
23 * The simplest way to navigate through an app is to create and initialize a new
24 * nav controller using the `<ion-nav>` component. `ion-nav` extends the `NavController`
25 * class.
26 *
27 * ```typescript
28 * import { Component } from `\@angular/core`;
29 * import { StartPage } from './start-page';
30 *
31 * \@Component(
32 * template: `<ion-nav [root]="rootPage"></ion-nav>`
33 * })
34 * class MyApp {
35 * // set the rootPage to the first page we want displayed
36 * public rootPage: any = StartPage;
37 *
38 * constructor(){
39 * }
40 * }
41 *
42 * ```
43 *
44 * ### Injecting NavController
45 * Injecting NavController will always get you an instance of the nearest
46 * NavController, regardless of whether it is a Tab or a Nav.
47 *
48 * Behind the scenes, when Ionic instantiates a new NavController, it creates an
49 * injector with NavController bound to that instance (usually either a Nav or
50 * Tab) and adds the injector to its own providers. For more information on
51 * providers and dependency injection, see [Dependency Injection](https://angular.io/docs/ts/latest/guide/dependency-injection.html).
52 *
53 * Instead, you can inject NavController and know that it is the correct
54 * navigation controller for most situations (for more advanced situations, see
55 * [Menu](../../menu/Menu/) and [Tab](../../tab/Tab/)).
56 *
57 * ```ts
58 * import { NavController } from 'ionic-angular';
59 *
60 * class MyComponent {
61 * constructor(public navCtrl: NavController) {
62 *
63 * }
64 * }
65 * ```
66 *
67 * ### Navigating from the Root component
68 * What if you want to control navigation from your root app component?
69 * You can't inject `NavController` because any components that are navigation
70 * controllers are _children_ of the root component so they aren't available
71 * to be injected.
72 *
73 * By adding a reference variable to the `ion-nav`, you can use `\@ViewChild` to
74 * get an instance of the `Nav` component, which is a navigation controller
75 * (it extends `NavController`):
76 *
77 * ```typescript
78 *
79 * import { Component, ViewChild } from '\@angular/core';
80 * import { NavController } from 'ionic-angular';
81 *
82 * \@Component({
83 * template: '<ion-nav #myNav [root]="rootPage"></ion-nav>'
84 * })
85 * export class MyApp {
86 * \@ViewChild('myNav') nav: NavController
87 * public rootPage: any = TabsPage;
88 *
89 * // Wait for the components in MyApp's template to be initialized
90 * // In this case, we are waiting for the Nav with reference variable of "#myNav"
91 * ngOnInit() {
92 * // Let's navigate from TabsPage to Page1
93 * this.nav.push(Page1);
94 * }
95 * }
96 * ```
97 *
98 * ### Navigating from an Overlay Component
99 * What if you wanted to navigate from an overlay component (popover, modal, alert, etc)?
100 * In this example, we've displayed a popover in our app. From the popover, we'll get a
101 * reference of the root `NavController` in our app, using the `getRootNav()` method.
102 *
103 *
104 * ```typescript
105 * import { Component } from '\@angular/core';
106 * import { App, ViewController } from 'ionic-angular';
107 *
108 * \@Component({
109 * template: `
110 * <ion-content>
111 * <h1>My PopoverPage</h1>
112 * <button ion-button (click)="pushPage()">Call pushPage</button>
113 * </ion-content>
114 * `
115 * })
116 * class PopoverPage {
117 * constructor(
118 * public viewCtrl: ViewController
119 * public appCtrl: App
120 * ) {}
121 *
122 * pushPage() {
123 * this.viewCtrl.dismiss();
124 * this.appCtrl.getRootNav().push(SecondPage);
125 * }
126 * }
127 * ```
128 *
129 *
130 * ## View creation
131 * Views are created when they are added to the navigation stack. For methods
132 * like [push()](#push), the NavController takes any component class that is
133 * decorated with `\@Component` as its first argument. The NavController then
134 * compiles that component, adds it to the app and animates it into view.
135 *
136 * By default, pages are cached and left in the DOM if they are navigated away
137 * from but still in the navigation stack (the exiting page on a `push()` for
138 * example). They are destroyed when removed from the navigation stack (on
139 * [pop()](#pop) or [setRoot()](#setRoot)).
140 *
141 * ## Pushing a View
142 * To push a new view onto the navigation stack, use the `push` method.
143 * If the page has an [`<ion-navbar>`](../../navbar/Navbar/),
144 * a back button will automatically be added to the pushed view.
145 *
146 * Data can also be passed to a view by passing an object to the `push` method.
147 * The pushed view can then receive the data by accessing it via the `NavParams`
148 * class.
149 *
150 * ```typescript
151 * import { Component } from '\@angular/core';
152 * import { NavController } from 'ionic-angular';
153 * import { OtherPage } from './other-page';
154 * \@Component({
155 * template: `
156 * <ion-header>
157 * <ion-navbar>
158 * <ion-title>Login</ion-title>
159 * </ion-navbar>
160 * </ion-header>
161 *
162 * <ion-content>
163 * <button ion-button (click)="pushPage()">
164 * Go to OtherPage
165 * </button>
166 * </ion-content>
167 * `
168 * })
169 * export class StartPage {
170 * constructor(public navCtrl: NavController) {
171 * }
172 *
173 * pushPage(){
174 * // push another page onto the navigation stack
175 * // causing the nav controller to transition to the new page
176 * // optional data can also be passed to the pushed page.
177 * this.navCtrl.push(OtherPage, {
178 * id: "123",
179 * name: "Carl"
180 * });
181 * }
182 * }
183 *
184 * import { NavParams } from 'ionic-angular';
185 *
186 * \@Component({
187 * template: `
188 * <ion-header>
189 * <ion-navbar>
190 * <ion-title>Other Page</ion-title>
191 * </ion-navbar>
192 * </ion-header>
193 * <ion-content>I'm the other page!</ion-content>`
194 * })
195 * class OtherPage {
196 * constructor(private navParams: NavParams) {
197 * let id = navParams.get('id');
198 * let name = navParams.get('name');
199 * }
200 * }
201 * ```
202 *
203 * ## Removing a view
204 * To remove a view from the stack, use the `pop` method.
205 * Popping a view will transition to the previous view.
206 *
207 * ```ts
208 * import { Component } from '\@angular/core';
209 * import { NavController } from 'ionic-angular';
210 *
211 * \@Component({
212 * template: `
213 * <ion-header>
214 * <ion-navbar>
215 * <ion-title>Other Page</ion-title>
216 * </ion-navbar>
217 * </ion-header>
218 * <ion-content>I'm the other page!</ion-content>`
219 * })
220 * class OtherPage {
221 * constructor(public navCtrl: NavController ){
222 * }
223 *
224 * popView(){
225 * this.navCtrl.pop();
226 * }
227 * }
228 * ```
229 *
230 * ## Lifecycle events
231 * Lifecycle events are fired during various stages of navigation. They can be
232 * defined in any component type which is pushed/popped from a `NavController`.
233 *
234 * ```ts
235 * import { Component } from '\@angular/core';
236 *
237 * \@Component({
238 * template: 'Hello World'
239 * })
240 * class HelloWorld {
241 * ionViewDidLoad() {
242 * console.log("I'm alive!");
243 * }
244 * ionViewWillLeave() {
245 * console.log("Looks like I'm about to leave :(");
246 * }
247 * }
248 * ```
249 *
250 * | Page Event | Returns | Description |
251 * |---------------------|-----------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
252 * | `ionViewDidLoad` | void | Runs when the page has loaded. This event only happens once per page being created. If a page leaves but is cached, then this event will not fire again on a subsequent viewing. The `ionViewDidLoad` event is good place to put your setup code for the page. |
253 * | `ionViewWillEnter` | void | Runs when the page is about to enter and become the active page. |
254 * | `ionViewDidEnter` | void | Runs when the page has fully entered and is now the active page. This event will fire, whether it was the first load or a cached page. |
255 * | `ionViewWillLeave` | void | Runs when the page is about to leave and no longer be the active page. |
256 * | `ionViewDidLeave` | void | Runs when the page has finished leaving and is no longer the active page. |
257 * | `ionViewWillUnload` | void | Runs when the page is about to be destroyed and have its elements removed. |
258 * | `ionViewCanEnter` | boolean/Promise&lt;void&gt; | Runs before the view can enter. This can be used as a sort of "guard" in authenticated views where you need to check permissions before the view can enter |
259 * | `ionViewCanLeave` | boolean/Promise&lt;void&gt; | 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 |
260 *
261 *
262 * ## Nav Guards
263 *
264 * 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.
265 * Similar to Angular route guards, but are more integrated with NavController. For example, if you wanted to prevent a user from leaving a view:
266 *
267 * ```ts
268 * export class MyClass{
269 * constructor(
270 * public navCtrl: NavController
271 * ){}
272 *
273 * pushPage(){
274 * this.navCtrl.push(DetailPage);
275 * }
276 *
277 * ionViewCanLeave(): boolean{
278 * // here we can either return true or false
279 * // depending on if we want to leave this view
280 * if(isValid(randomValue)){
281 * return true;
282 * } else {
283 * return false;
284 * }
285 * }
286 * }
287 * ```
288 *
289 * We need to make sure that our `navCtrl.push` has a catch in order to catch the and handle the error.
290 * If you need to prevent a view from entering, you can do the same thing
291 *
292 * ```ts
293 * export class MyClass{
294 * constructor(
295 * public navCtrl: NavController
296 * ){}
297 *
298 * pushPage(){
299 * this.navCtrl.push(DetailPage);
300 * }
301 *
302 * }
303 *
304 * export class DetailPage(){
305 * constructor(
306 * public navCtrl: NavController
307 * ){}
308 * ionViewCanEnter(): boolean{
309 * // here we can either return true or false
310 * // depending on if we want to leave this view
311 * if(isValid(randomValue)){
312 * return true;
313 * } else {
314 * return false;
315 * }
316 * }
317 * }
318 * ```
319 *
320 * Similar to `ionViewCanLeave` we still need a catch on the original `navCtrl.push` in order to handle it properly.
321 * When handling the back button in the `ion-navbar`, the catch is already taken care of for you by the framework.
322 *
323 * ## NavOptions
324 *
325 * Some methods on `NavController` allow for customizing the current transition.
326 * To do this, we can pass an object with the modified properites.
327 *
328 *
329 * | Property | Value | Description |
330 * |-----------|-----------|------------------------------------------------------------------------------------------------------------|
331 * | animate | `boolean` | Whether or not the transition should animate. |
332 * | animation | `string` | What kind of animation should be used. |
333 * | direction | `string` | The conceptual direction the user is navigating. For example, is the user navigating `forward`, or `back`? |
334 * | duration | `number` | The length in milliseconds the animation should take. |
335 * | easing | `string` | The easing for the animation. |
336 *
337 * The property 'animation' understands the following values: `md-transition`, `ios-transition` and `wp-transition`.
338 *
339 * @see {\@link /docs/components#navigation Navigation Component Docs}
340 * @abstract
341 */
342var NavController = (function () {
343 function NavController() {
344 }
345 /**
346 * Push a new component onto the current navigation stack. Pass any aditional information
347 * along as an object. This additional information is accessible through NavParams
348 *
349 * @abstract
350 * @param {?} page
351 * @param {?=} params
352 * @param {?=} opts
353 * @param {?=} done
354 * @return {?}
355 */
356 NavController.prototype.push = function (page, params, opts, done) { };
357 /**
358 * Inserts a component into the nav stack at the specified index. This is useful if
359 * you need to add a component at any point in your navigation stack.
360 *
361 *
362 * @abstract
363 * @param {?} insertIndex
364 * @param {?} page
365 * @param {?=} params
366 * @param {?=} opts
367 * @param {?=} done
368 * @return {?}
369 */
370 NavController.prototype.insert = function (insertIndex, page, params, opts, done) { };
371 /**
372 * Inserts an array of components into the nav stack at the specified index.
373 * The last component in the array will become instantiated as a view,
374 * and animate in to become the active view.
375 *
376 * @abstract
377 * @param {?} insertIndex
378 * @param {?} insertPages
379 * @param {?=} opts
380 * @param {?=} done
381 * @return {?}
382 */
383 NavController.prototype.insertPages = function (insertIndex, insertPages, opts, done) { };
384 /**
385 * Call to navigate back from a current component. Similar to `push()`, you
386 * can also pass navigation options.
387 *
388 * @abstract
389 * @param {?=} opts
390 * @param {?=} done
391 * @return {?}
392 */
393 NavController.prototype.pop = function (opts, done) { };
394 /**
395 * Navigate back to the root of the stack, no matter how far back that is.
396 *
397 * @abstract
398 * @param {?=} opts
399 * @param {?=} done
400 * @return {?}
401 */
402 NavController.prototype.popToRoot = function (opts, done) { };
403 /**
404 * @hidden
405 * Pop to a specific view in the history stack. If an already created
406 * instance of the page is not found in the stack, then it'll `setRoot`
407 * to the nav stack by removing all current pages and pushing on a
408 * new instance of the given page. Note that any params passed to
409 * this method are not used when an existing page instance has already
410 * been found in the stack. Nav params are only used by this method
411 * when a new instance needs to be created.
412 *
413 * @abstract
414 * @param {?} page
415 * @param {?=} opts
416 * @param {?=} done
417 * @return {?}
418 */
419 NavController.prototype.popTo = function (page, opts, done) { };
420 /**
421 * @hidden
422 * Pop sequently all the pages in the stack.
423 *
424 * @abstract
425 * @return {?}
426 */
427 NavController.prototype.popAll = function () { };
428 /**
429 * Removes a page from the nav stack at the specified index.
430 *
431 * @abstract
432 * @param {?} startIndex
433 * @param {?=} removeCount
434 * @param {?=} opts
435 * @param {?=} done
436 * @return {?}
437 */
438 NavController.prototype.remove = function (startIndex, removeCount, opts, done) { };
439 /**
440 * Removes the specified view controller from the nav stack.
441 *
442 * @abstract
443 * @param {?} viewController
444 * @param {?=} opts
445 * @param {?=} done
446 * @return {?}
447 */
448 NavController.prototype.removeView = function (viewController, opts, done) { };
449 /**
450 * Set the root for the current navigation stack.
451 * @abstract
452 * @param {?} pageOrViewCtrl
453 * @param {?=} params
454 * @param {?=} opts
455 * @param {?=} done
456 * @return {?}
457 */
458 NavController.prototype.setRoot = function (pageOrViewCtrl, params, opts, done) { };
459 /**
460 * @abstract
461 * @param {?} options
462 * @return {?}
463 */
464 NavController.prototype.goToRoot = function (options) { };
465 /**
466 * Set the views of the current navigation stack and navigate to the
467 * last view. By default animations are disabled, but they can be enabled
468 * by passing options to the navigation controller.You can also pass any
469 * navigation params to the individual pages in the array.
470 *
471 * @abstract
472 * @param {?} pages
473 * @param {?=} opts
474 * @param {?=} done
475 * @return {?}
476 */
477 NavController.prototype.setPages = function (pages, opts, done) { };
478 /**
479 * @abstract
480 * @param {?} index
481 * @return {?}
482 */
483 NavController.prototype.getByIndex = function (index) { };
484 /**
485 * @abstract
486 * @param {?=} includeEntering
487 * @return {?}
488 */
489 NavController.prototype.getActive = function (includeEntering) { };
490 /**
491 * Returns if the given view is the active view or not.
492 * @abstract
493 * @param {?} view
494 * @return {?}
495 */
496 NavController.prototype.isActive = function (view) { };
497 /**
498 * Returns the view controller which is before the given view controller.
499 * If no view controller is passed in, then it'll default to the active view.
500 * @abstract
501 * @param {?=} view
502 * @return {?}
503 */
504 NavController.prototype.getPrevious = function (view) { };
505 /**
506 * Returns the first view controller in this nav controller's stack.
507 * @abstract
508 * @return {?}
509 */
510 NavController.prototype.first = function () { };
511 /**
512 * Returns the last page in this nav controller's stack.
513 * @abstract
514 * @return {?}
515 */
516 NavController.prototype.last = function () { };
517 /**
518 * Returns the index number of the given view controller.
519 * @abstract
520 * @param {?} view
521 * @return {?}
522 */
523 NavController.prototype.indexOf = function (view) { };
524 /**
525 * Returns the number of views in this nav controller.
526 * @abstract
527 * @return {?}
528 */
529 NavController.prototype.length = function () { };
530 /**
531 * Returns the current stack of views in this nav controller.
532 * @abstract
533 * @return {?}
534 */
535 NavController.prototype.getViews = function () { };
536 /**
537 * Returns a list of the active child navigation.
538 * @abstract
539 * @return {?}
540 */
541 NavController.prototype.getActiveChildNavs = function () { };
542 /**
543 * Returns the active child navigation.
544 * @abstract
545 * @return {?}
546 */
547 NavController.prototype.getActiveChildNav = function () { };
548 /**
549 * Returns a list of all child navigation containers
550 * @abstract
551 * @return {?}
552 */
553 NavController.prototype.getAllChildNavs = function () { };
554 /**
555 * Returns if the nav controller is actively transitioning or not.
556 * @abstract
557 * @param {?=} includeAncestors
558 * @return {?}
559 */
560 NavController.prototype.isTransitioning = function (includeAncestors) { };
561 /**
562 * If it's possible to use swipe back or not. If it's not possible
563 * to go back, or swipe back is not enabled, then this will return `false`.
564 * If it is possible to go back, and swipe back is enabled, then this
565 * will return `true`.
566 * @abstract
567 * @return {?}
568 */
569 NavController.prototype.canSwipeBack = function () { };
570 /**
571 * Returns `true` if there's a valid previous page that we can pop
572 * back to. Otherwise returns `false`.
573 * @abstract
574 * @return {?}
575 */
576 NavController.prototype.canGoBack = function () { };
577 /**
578 * @hidden
579 * @abstract
580 * @param {?} nav
581 * @return {?}
582 */
583 NavController.prototype.registerChildNav = function (nav) { };
584 /**
585 * @hidden
586 * @abstract
587 * @return {?}
588 */
589 NavController.prototype.resize = function () { };
590 /**
591 * @abstract
592 * @return {?}
593 */
594 NavController.prototype.getType = function () { };
595 /**
596 * @abstract
597 * @return {?}
598 */
599 NavController.prototype.getSecondaryIdentifier = function () { };
600 return NavController;
601}());
602export { NavController };
603function NavController_tsickle_Closure_declarations() {
604 /**
605 * Observable to be subscribed to when a component is loaded.
606 * @type {?}
607 */
608 NavController.prototype.viewDidLoad;
609 /**
610 * Observable to be subscribed to when a component is about to be loaded.
611 * @type {?}
612 */
613 NavController.prototype.viewWillEnter;
614 /**
615 * Observable to be subscribed to when a component has fully become the active component.
616 * @type {?}
617 */
618 NavController.prototype.viewDidEnter;
619 /**
620 * Observable to be subscribed to when a component is about to leave, and no longer active.
621 * @type {?}
622 */
623 NavController.prototype.viewWillLeave;
624 /**
625 * Observable to be subscribed to when a component has fully left and is no longer active.
626 * @type {?}
627 */
628 NavController.prototype.viewDidLeave;
629 /**
630 * Observable to be subscribed to when a component is about to be unloaded and destroyed.
631 * @type {?}
632 */
633 NavController.prototype.viewWillUnload;
634 /**
635 * @hidden
636 * @type {?}
637 */
638 NavController.prototype.id;
639 /**
640 * @hidden
641 * @type {?}
642 */
643 NavController.prototype.name;
644 /**
645 * The parent navigation instance. If this is the root nav, then
646 * it'll be `null`. A `Tab` instance's parent is `Tabs`, otherwise
647 * the parent would be another nav, if it's not already the root nav.
648 * @type {?}
649 */
650 NavController.prototype.parent;
651 /**
652 * @hidden
653 * @type {?}
654 */
655 NavController.prototype.config;
656 /**
657 * \@input {boolean} If true, swipe to go back is enabled.
658 * @type {?}
659 */
660 NavController.prototype.swipeBackEnabled;
661}
662//# sourceMappingURL=nav-controller.js.map
\No newline at end of file