feat(angular): ion-nav

angular/src/navigation/ion-nav.ts

@@ -1,22 +1,26 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-import {
-  NavigationEnd,
-  NavigationStart,
-  Router
-} from '@angular/router';
+import { ComponentFactoryResolver, Directive, ElementRef, Injector} from '@angular/core';
+import { NavigationEnd, NavigationStart, Router } from '@angular/router';
+
+import { FrameworkDelegate, NavOptions, NavParams, TransitionDoneFn, ViewController } from '@ionic/core';
+import { proxyEl } from '../util/util';
+import { AngularDelegate } from '..';
 
 
-@Component({
+@Directive({
   selector: 'ion-nav',
-  template: '<ng-content></ng-content>',
-  styles: [`
-    ion-nav > :not(.show-page) { display: none; }
-  `],
-  encapsulation: ViewEncapsulation.None
 })
 export class IonNav {
 
-  constructor(router: Router) {
+  private delegate: FrameworkDelegate;
+
+  constructor(
+    private ref: ElementRef,
+    router: Router,
+    cfr: ComponentFactoryResolver,
+    injector: Injector,
+    angularDelegate: AngularDelegate,
+  ) {
+    this.delegate = angularDelegate.create(cfr, injector);
     console.log('ion-nav');
 
     router.events.subscribe(ev => {
@@ -29,4 +33,93 @@ export class IonNav {
     });
   }
 
+  push(page: any, params?: NavParams, opts?: NavOptions, done?: TransitionDoneFn): Promise<boolean> {
+    return proxyEl(this.ref, 'push', page, params, this.wrap(opts), done);
+  }
+
+  insert(insertIndex: number, page: any, params?: NavParams, opts?: NavOptions, done?: TransitionDoneFn): Promise<boolean> {
+    return proxyEl(this.ref, 'insert', insertIndex, page, params, this.wrap(opts), done);
+  }
+
+  insertPages(insertIndex: number, insertPages: any[], opts?: NavOptions, done?: TransitionDoneFn): Promise<boolean> {
+    return proxyEl(this.ref, 'insertPages', insertIndex, insertPages, this.wrap(opts), done);
+  }
+
+  pop(opts?: NavOptions, done?: TransitionDoneFn): Promise<boolean> {
+    return proxyEl(this.ref, 'pop', this.wrap(opts), done);
+  }
+
+  popTo(indexOrViewCtrl: any, opts?: NavOptions, done?: TransitionDoneFn): Promise<boolean> {
+    return proxyEl(this.ref, 'popTo', indexOrViewCtrl, this.wrap(opts), done);
+  }
+
+  popToRoot(opts?: NavOptions, done?: TransitionDoneFn): Promise<boolean> {
+    return proxyEl(this.ref, 'popToRoot', this.wrap(opts), done);
+  }
+
+  popAll(): Promise<boolean[]> {
+    return proxyEl(this.ref, 'popAll');
+  }
+
+  removeIndex(startIndex: number, removeCount = 1, opts?: NavOptions, done?: TransitionDoneFn): Promise<boolean> {
+    return proxyEl(this.ref, 'removeIndex', startIndex, removeCount, this.wrap(opts), done);
+  }
+
+  removeView(viewController: ViewController, opts?: NavOptions, done?: TransitionDoneFn): Promise<boolean> {
+    return proxyEl(this.ref, 'removeView', viewController, this.wrap(opts), done);
+  }
+
+  setRoot(pageOrViewCtrl: any, params?: any, opts?: NavOptions, done?: TransitionDoneFn): Promise<boolean> {
+    return proxyEl(this.ref, 'setRoot', pageOrViewCtrl, params, this.wrap(opts), done);
+  }
+
+  setPages(pages: any[], opts?: NavOptions, done?: TransitionDoneFn): Promise<boolean> {
+    return proxyEl(this.ref, 'setPages', pages, this.wrap(opts), done);
+  }
+
+  getAllChildNavs(): any[] {
+    return proxyEl(this.ref, 'getAllChildNavs');
+  }
+
+  canGoBack(view?: ViewController): boolean {
+    return proxyEl(this.ref, 'canGoBack', view);
+  }
+
+  getActive(): ViewController {
+    return proxyEl(this.ref, 'getActive');
+  }
+
+  getByIndex(index: number): ViewController {
+    return proxyEl(this.ref, 'getByIndex', index);
+  }
+
+  getPrevious(view?: ViewController): ViewController|undefined {
+    return proxyEl(this.ref, 'getPrevious', view);
+  }
+
+  getViews(): Array<ViewController> {
+    return proxyEl(this.ref, 'getViews');
+  }
+  /**
+   * Return a view controller
+   */
+  getViewById(id: string): ViewController|undefined {
+    return proxyEl(this.ref, 'getViewById', id);
+  }
+
+  indexOf(viewController: ViewController) {
+    return proxyEl(this.ref, 'indexOf', viewController);
+  }
+
+  length() {
+    return proxyEl(this.ref, 'length');
+  }
+
+  private wrap(opts?: NavOptions): NavOptions {
+    return {
+      ...this.wrap(opts),
+      delegate: this.delegate
+    };
+  }
+
 }

angular/src/navigation/router-transition.ts

@@ -1,6 +1,5 @@
 import { ComponentRef } from '@angular/core';
 
-
 export function runTransition(enteringRef: ComponentRef<any>, leavingRef: ComponentRef<any>): Promise<void> {
   const enteringElm = (enteringRef && enteringRef.location && enteringRef.location.nativeElement);
   const leavingElm = (leavingRef && leavingRef.location && leavingRef.location.nativeElement);
@@ -9,11 +8,11 @@ export function runTransition(enteringRef: ComponentRef<any>, leavingRef: Compon
     return Promise.resolve();
   }
 
-  return transition(enteringElm, leavingElm);
+  return tr(enteringElm, leavingElm);
 }
 
 
-function transition(enteringElm: HTMLElement, leavingElm: HTMLElement): Promise<void> {
+function tr(enteringElm: HTMLElement, leavingElm: HTMLElement): Promise<void> {
   console.log('transition start');
 
   return new Promise(resolve => {

angular/src/util/util.ts

@@ -1,3 +1,4 @@
+import { ElementRef } from '@angular/core';
 
 export function proxyMethod(ctrlName: string, methodName: string, ...args: any[]) {
   const controller = ensureElementInBody(ctrlName);
@@ -5,6 +6,12 @@ export function proxyMethod(ctrlName: string, methodName: string, ...args: any[]
     .then(() => (controller as any)[methodName].apply(controller, args));
 }
 
+export function proxyEl(ref: ElementRef, methodName: string, ...args: any[]) {
+  return ref.nativeElement.componentOnReady()
+    .then((el: any) => el[methodName].apply(el, args));
+}
+
+
 export function ensureElementInBody(elementName: string) {
   let element = document.querySelector(elementName);
   if (!element) {