diff --git a/angular/src/navigation/ion-back-button.ts b/angular/src/navigation/ion-back-button.ts index bd1ee4f487..79e0b7e4ba 100644 --- a/angular/src/navigation/ion-back-button.ts +++ b/angular/src/navigation/ion-back-button.ts @@ -1,27 +1,19 @@ -import { Directive } from '@angular/core'; +import { Directive, HostListener, Optional } from '@angular/core'; +import { IonRouterOutlet } from './ion-router-outlet'; @Directive({ selector: 'ion-back-button' }) export class IonBackButton { - // constructor( - // private navCtrl: NavController, - // private router - // @Optional() private routerOutlet: IonRouterOutlet, - // ) { - // routerOutlet. - // } - - - - // @HostListener('click') - // onClick() { - // if(routerOutlet.canGoBack()) - // this.navCtrl.setGoback(); - // if (!this.routerLink) { - // window.history.back(); - // } - // } + constructor( + @Optional() private routerOutlet: IonRouterOutlet, + ) {} + @HostListener('click') + onClick() { + if (this.routerOutlet.canGoBack()) { + this.routerOutlet.pop(); + } + } } diff --git a/angular/src/navigation/ion-nav-controller.ts b/angular/src/navigation/ion-nav-controller.ts index 9eec9fea19..a8d56e2486 100644 --- a/angular/src/navigation/ion-nav-controller.ts +++ b/angular/src/navigation/ion-nav-controller.ts @@ -3,7 +3,7 @@ import { Injectable } from '@angular/core'; @Injectable() export class NavController { - private direction = 1; + private direction = 0; private goBack = false; private stack: string[] = []; diff --git a/angular/src/navigation/ion-nav.ts b/angular/src/navigation/ion-nav.ts index 881f455988..faacf0b6b7 100644 --- a/angular/src/navigation/ion-nav.ts +++ b/angular/src/navigation/ion-nav.ts @@ -1,8 +1,9 @@ -import { ComponentFactoryResolver, Directive, ElementRef, Injector} from '@angular/core'; +import { ComponentFactoryResolver, Directive, ElementRef, Injector, Input} from '@angular/core'; import { AngularDelegate } from '../providers/angular-delegate'; -import { NavOptions, NavParams, TransitionDoneFn, ViewController } from '@ionic/core'; +import { ComponentProps, NavOptions, TransitionDoneFn, ViewController } from '@ionic/core'; import { proxyEl } from '../util/util'; +import { inputs } from '../directives/proxies'; @Directive({ @@ -10,6 +11,9 @@ import { proxyEl } from '../util/util'; }) export class Nav { + @Input() root: any; + @Input() rootParams: any; + constructor( private ref: ElementRef, cfr: ComponentFactoryResolver, @@ -17,13 +21,14 @@ export class Nav { angularDelegate: AngularDelegate, ) { this.ref.nativeElement.delegate = angularDelegate.create(cfr, injector); + inputs(this, ref, ['root', 'rootParams']); } - push(page: any, params?: NavParams, opts?: NavOptions, done?: TransitionDoneFn): Promise { + push(page: any, params?: ComponentProps, opts?: NavOptions, done?: TransitionDoneFn): Promise { return proxyEl(this.ref, 'push', page, params, opts, done); } - insert(insertIndex: number, page: any, params?: NavParams, opts?: NavOptions, done?: TransitionDoneFn): Promise { + insert(insertIndex: number, page: any, params?: ComponentProps, opts?: NavOptions, done?: TransitionDoneFn): Promise { return proxyEl(this.ref, 'insert', insertIndex, page, params, opts, done); } diff --git a/angular/src/navigation/ion-router-outlet.ts b/angular/src/navigation/ion-router-outlet.ts index 0f96d569a1..ecfaf2c57c 100644 --- a/angular/src/navigation/ion-router-outlet.ts +++ b/angular/src/navigation/ion-router-outlet.ts @@ -1,7 +1,7 @@ import { Attribute, ChangeDetectorRef, ComponentFactoryResolver, ComponentRef, Directive, ElementRef, EventEmitter, Injector, OnDestroy, OnInit, Optional, Output, ViewContainerRef } from '@angular/core'; import { ActivatedRoute, ChildrenOutletContexts, PRIMARY_OUTLET, Router } from '@angular/router'; import { StackController } from './router-controller'; -import { NavController } from '..'; +import { NavController } from './ion-nav-controller'; @Directive({ selector: 'ion-router-outlet', @@ -31,7 +31,7 @@ export class IonRouterOutlet implements OnDestroy, OnInit { ) { this.name = name || PRIMARY_OUTLET; parentContexts.onChildOutletCreated(this.name, this as any); - this.stackCtrl = new StackController(stack != null, elementRef.nativeElement, router); + this.stackCtrl = new StackController(stack != null, elementRef.nativeElement, router, this.navCtrl); } ngOnDestroy(): void { diff --git a/angular/src/navigation/router-controller.ts b/angular/src/navigation/router-controller.ts index ec638d07c4..9001bd2f61 100644 --- a/angular/src/navigation/router-controller.ts +++ b/angular/src/navigation/router-controller.ts @@ -1,17 +1,19 @@ import { ComponentRef } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; -import { NavDirection } from '@ionic/core/dist/types/components/nav/nav-util'; +import { NavController } from './ion-nav-controller'; +import { NavDirection } from '@ionic/core'; export class StackController { - viewsSnapshot: RouteView[] = []; - views: RouteView[] = []; + private viewsSnapshot: RouteView[] = []; + private views: RouteView[] = []; constructor( private stack: boolean, private containerEl: HTMLIonRouterOutletElement, - private router: Router + private router: Router, + private navCtrl: NavController, ) {} createView(enteringRef: ComponentRef, route: ActivatedRoute): RouteView { @@ -36,13 +38,14 @@ export class StackController { const leavingView = this.getActive(); const reused = this.insertView(enteringView); direction = direction != null ? direction : (reused ? -1 : 1); - await this.transition(enteringView, leavingView, direction); + await this.transition(enteringView, leavingView, direction, this.canGoBack(1)); this.cleanup(); } pop(deep: number) { const view = this.views[this.views.length - deep - 1]; + this.navCtrl.setGoback(); this.router.navigateByUrl(view.url); } @@ -77,7 +80,7 @@ export class StackController { return this.views.length > 0 ? this.views[this.views.length - 1] : null; } - private async transition(enteringView: RouteView, leavingView: RouteView, direction: number) { + private async transition(enteringView: RouteView, leavingView: RouteView, direction: number, showGoBack: boolean) { const enteringEl = enteringView ? enteringView.element : undefined; const leavingEl = leavingView ? leavingView.element : undefined; const containerEl = this.containerEl; @@ -88,7 +91,8 @@ export class StackController { await containerEl.componentOnReady(); await containerEl.commit(enteringEl, leavingEl, { duration: direction === 0 ? 0 : undefined, - direction: direction === -1 ? NavDirection.Back : NavDirection.Forward + direction: direction === -1 ? NavDirection.Back : NavDirection.Forward, + showGoBack }); } } diff --git a/angular/test/nav/src/app/simple-nav/page-one/page-one.ts b/angular/test/nav/src/app/simple-nav/page-one/page-one.ts index 2ba46f74e7..a281d3c067 100755 --- a/angular/test/nav/src/app/simple-nav/page-one/page-one.ts +++ b/angular/test/nav/src/app/simple-nav/page-one/page-one.ts @@ -6,6 +6,9 @@ import { PageTwo } from '../page-two/page-two'; template: ` + + + Simple Page One diff --git a/angular/test/nav/src/app/simple-nav/page-three/page-three.ts b/angular/test/nav/src/app/simple-nav/page-three/page-three.ts index c9e6032da6..c611bffe01 100755 --- a/angular/test/nav/src/app/simple-nav/page-three/page-three.ts +++ b/angular/test/nav/src/app/simple-nav/page-three/page-three.ts @@ -6,6 +6,9 @@ import { ActivatedRoute } from '@angular/router'; template: ` + + + Page Three diff --git a/angular/test/nav/src/app/simple-nav/page-two/page-two.ts b/angular/test/nav/src/app/simple-nav/page-two/page-two.ts index 28b9343afa..6edc5e642b 100755 --- a/angular/test/nav/src/app/simple-nav/page-two/page-two.ts +++ b/angular/test/nav/src/app/simple-nav/page-two/page-two.ts @@ -7,6 +7,9 @@ import { Location } from '@angular/common'; template: ` + + + Page Two diff --git a/core/src/components/router-outlet/route-outlet.tsx b/core/src/components/router-outlet/route-outlet.tsx index c5d07711d5..08f77db8f4 100644 --- a/core/src/components/router-outlet/route-outlet.tsx +++ b/core/src/components/router-outlet/route-outlet.tsx @@ -76,6 +76,7 @@ export class RouterOutlet implements NavOutlet { easing: opts.easing, animationCtrl: this.animationCtrl, + showGoBack: opts.showGoBack, enteringEl: enteringEl, leavingEl: leavingEl, baseEl: this.el, @@ -127,6 +128,7 @@ export interface RouterOutletOptions { animationBuilder?: AnimationBuilder; duration?: number; easing?: string; + showGoBack?: boolean; direction?: NavDirection; mode?: 'md' | 'ios'; } diff --git a/core/src/index.d.ts b/core/src/index.d.ts index 7ef725b1f9..859e5edd70 100644 --- a/core/src/index.d.ts +++ b/core/src/index.d.ts @@ -59,7 +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 { NavOptions, TransitionDoneFn} from './components/nav/nav-util'; +export { NavDirection, 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'; @@ -110,7 +110,7 @@ export { DomController, RafCallback } from './global/dom-controller'; export { FrameworkDelegate } from './utils/framework-delegate'; export { OverlayEventDetail } from './utils/overlays'; -export type ComponentRef = HTMLElement | string; +export type ComponentRef = Function | HTMLElement | string; export type ComponentProps = {[key: string]: any}; export interface Config { diff --git a/core/src/utils/framework-delegate.ts b/core/src/utils/framework-delegate.ts index 71150d198e..1c86468904 100644 --- a/core/src/utils/framework-delegate.ts +++ b/core/src/utils/framework-delegate.ts @@ -9,7 +9,13 @@ export function attachComponent(delegate: FrameworkDelegate, container: Element, if (delegate) { return delegate.attachViewToDom(container, component, componentProps, cssClasses); } - const el = (typeof component === 'string') ? document.createElement(component) : component; + if (typeof component !== 'string' && !(component instanceof HTMLElement)) { + throw new Error('framework delegate is missing'); + } + + const el = (typeof component === 'string') + ? document.createElement(component) + : component; cssClasses && cssClasses.forEach(c => el.classList.add(c)); componentProps && Object.assign(el, componentProps);