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) {

core/src/components/virtual-scroll/virtual-scroll.tsx

@@ -28,7 +28,7 @@ export class VirtualScroll {
   private heightChanged = false;
   private lastItemLen = 0;
 
-  @Element() el: HTMLElement;
+  @Element() el: HTMLStencilElement;
 
   @Prop({context: 'dom'}) dom: DomController;
   @Prop({context: 'enableListener'}) enableListener: EventListenerEnable;
@@ -257,7 +257,7 @@ export class VirtualScroll {
     } else if (this.domRender) {
       this.domRender(this.virtualDom);
     } else if (this.renderer) {
-      (this.el as any).forceUpdate();
+      this.el.forceUpdate();
     }
     if (this.heightChanged) {
       this.el.style.height = this.totalHeight + 'px';

core/src/index.d.ts

@@ -59,6 +59,7 @@ export * from './components/modal/modal';
 export { ModalController } from './components/modal-controller/modal-controller';
 export * from './components/nav/nav';
 export { ViewController } from './components/nav/view-controller';
+export { NavParams, NavOptions, TransitionDoneFn} from './components/nav/nav-util';
 export { Note } from './components/note/note';
 export { PickerColumnCmp } from './components/picker-column/picker-column';
 export * from './components/picker/picker';

demos/angular/package-lock.json

@@ -236,9 +236,9 @@
       "integrity": "sha512-6HkJ+IZAy1o+EKjw1hBn+/CzkhHolCMXnUBxjHBCdNduCkeAiijFVCmok5lYbTjCX0xNI/rBtJmkFKrotBmWLQ=="
     },
     "@ionic/core": {
-      "version": "0.1.4-5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.1.4-5.tgz",
-      "integrity": "sha512-d8h7mMCWwyU+aPBwGcznnkmN4xTWSgjxE9gxKZ+qKxzeHN5C/T5qbGgfHzyO5Dad4EO3lsvkAP6ijjrL1VQIGQ==",
+      "version": "0.1.4-8",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.1.4-8.tgz",
+      "integrity": "sha512-6KelGeTQ9hOMr7Gz4qoKqpu1/qJoqZyZZNWZf1vZa3lC47n2NDTv8TE4f+2x0Vp9PqQ/DZoJLPLuvKb5l0CKYQ==",
       "requires": {
         "ionicons": "4.0.0-18"
       }