fix(angular): ion-back-button

This commit is contained in:
Manu Mtz.-Almeida
2018-03-29 20:46:13 +02:00
parent 7b9a00e433
commit 9c789ceac4
11 changed files with 54 additions and 36 deletions

View File

@ -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();
}
}
}

View File

@ -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[] = [];

View File

@ -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<boolean> {
push(page: any, params?: ComponentProps, opts?: NavOptions, done?: TransitionDoneFn): Promise<boolean> {
return proxyEl(this.ref, 'push', page, params, opts, done);
}
insert(insertIndex: number, page: any, params?: NavParams, opts?: NavOptions, done?: TransitionDoneFn): Promise<boolean> {
insert(insertIndex: number, page: any, params?: ComponentProps, opts?: NavOptions, done?: TransitionDoneFn): Promise<boolean> {
return proxyEl(this.ref, 'insert', insertIndex, page, params, opts, done);
}

View File

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

View File

@ -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<any>, 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
});
}
}