feat(angular): add global pop() (#17182)

fixes #16340

angular/src/directives/navigation/ion-router-outlet.ts

@@ -1,4 +1,4 @@
-import { Attribute, ChangeDetectorRef, ComponentFactoryResolver, ComponentRef, Directive, ElementRef, EventEmitter, Injector, NgZone, OnDestroy, OnInit, Optional, Output, ViewContainerRef } from '@angular/core';
+import { Attribute, ChangeDetectorRef, ComponentFactoryResolver, ComponentRef, Directive, ElementRef, EventEmitter, Injector, NgZone, OnDestroy, OnInit, Optional, Output, SkipSelf, ViewContainerRef } from '@angular/core';
 import { ActivatedRoute, ChildrenOutletContexts, OutletContext, PRIMARY_OUTLET, Router } from '@angular/router';
 
 import { Config } from '../../providers/config';
@@ -51,11 +51,12 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     @Optional() @Attribute('tabs') tabs: string,
     private changeDetector: ChangeDetectorRef,
     private config: Config,
-    navCtrl: NavController,
+    private navCtrl: NavController,
     elementRef: ElementRef,
     router: Router,
     zone: NgZone,
-    activatedRoute: ActivatedRoute
+    activatedRoute: ActivatedRoute,
+    @SkipSelf() @Optional() readonly parentOutlet?: IonRouterOutlet
   ) {
     this.nativeEl = elementRef.nativeElement;
     this.name = name || PRIMARY_OUTLET;
@@ -175,6 +176,7 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
 
     this.activatedView = enteringView;
     this.stackCtrl.setActive(enteringView).then(data => {
+      this.navCtrl.setTopOutlet(this);
       this.activateEvents.emit(cmpRef.instance);
       this.stackEvents.emit(data);
     });

angular/src/directives/navigation/stack-controller.ts

@@ -76,8 +76,11 @@ export class StackController {
   pop(deep: number, stackId = this.getActiveStackId()) {
     return this.zone.run(() => {
       const views = this.getStack(stackId);
+      if (views.length <= deep) {
+        return Promise.resolve(false);
+      }
       const view = views[views.length - deep - 1];
-      return this.navCtrl.navigateBack(view.url);
+      return this.navCtrl.navigateBack(view.url).then(() => true);
     });
   }
 

angular/src/providers/nav-controller.ts

@@ -3,6 +3,8 @@ import { Injectable, Optional } from '@angular/core';
 import { NavigationExtras, NavigationStart, Router, UrlTree } from '@angular/router';
 import { NavDirection, RouterDirection } from '@ionic/core';
 
+import { IonRouterOutlet } from '../directives/navigation/ion-router-outlet';
+
 import { Platform } from './platform';
 
 export interface AnimationOptions {
@@ -17,6 +19,7 @@ export interface NavigationOptions extends NavigationExtras, AnimationOptions {}
 })
 export class NavController {
 
+  private topOutlet?: IonRouterOutlet;
   private direction: 'forward' | 'back' | 'root' | 'auto' = DEFAULT_DIRECTION;
   private animated?: NavDirection = DEFAULT_ANIMATED;
   private guessDirection: RouterDirection = 'forward';
@@ -41,7 +44,7 @@ export class NavController {
     }
 
     // Subscribe to backButton events
-    platform.backButton.subscribeWithPriority(0, () => this.goBack());
+    platform.backButton.subscribeWithPriority(0, () => this.pop());
   }
 
   navigateForward(url: string | UrlTree | any[], options: NavigationOptions = {}): Promise<boolean> {
@@ -67,16 +70,32 @@ export class NavController {
     }
   }
 
-  goBack(options: AnimationOptions = { animated: true, animationDirection: 'back' }) {
+  back(options: AnimationOptions = { animated: true, animationDirection: 'back' }) {
     this.setDirection('back', options.animated, options.animationDirection);
     return this.location.back();
    }
 
+  async pop() {
+    let outlet = this.topOutlet;
+
+    while (outlet) {
+      if (await outlet.pop()) {
+        break;
+      } else {
+        outlet = outlet.parentOutlet;
+      }
+    }
+   }
+
   setDirection(direction: RouterDirection, animated?: boolean, animationDirection?: 'forward' | 'back') {
     this.direction = direction;
     this.animated = getAnimation(direction, animated, animationDirection);
   }
 
+  setTopOutlet(outlet: IonRouterOutlet) {
+    this.topOutlet = outlet;
+  }
+
   consumeTransition() {
     let direction: RouterDirection = 'root';
     let animation: NavDirection | undefined;

core/api.txt

@@ -864,7 +864,7 @@ ion-router-outlet,prop,animation,((Animation: Animation, baseEl: any, opts?: any
 ion-router,none
 ion-router,prop,root,string,'/',false,false
 ion-router,prop,useHash,boolean,true,false,false
-ion-router,method,goBack,goBack() => Promise<void>
+ion-router,method,back,back() => Promise<void>
 ion-router,method,push,push(url: string, direction?: RouterDirection) => Promise<boolean>
 ion-router,event,ionRouteDidChange,RouterEventDetail,true
 ion-router,event,ionRouteWillChange,RouterEventDetail,true

core/src/components.d.ts

@@ -3620,7 +3620,7 @@ export namespace Components {
     /**
     * Go back to previous page in the window.history.
     */
-    'goBack': () => Promise<void>;
+    'back': () => Promise<void>;
     'navChanged': (direction: RouterDirection) => Promise<boolean>;
     'printDebug': () => void;
     /**

core/src/components/router/readme.md

@@ -69,7 +69,7 @@ If you're using Angular, please see [ion-router-outlet](../router-outlet) instea
 
 ## Methods
 
-### `goBack() => Promise<void>`
+### `back() => Promise<void>`
 
 Go back to previous page in the window.history.
 

core/src/components/router/router.tsx

@@ -83,7 +83,7 @@ export class Router implements ComponentInterface {
 
   @Listen('document:ionBackButton')
   protected onBackButton(ev: BackButtonEvent) {
-    ev.detail.register(0, () => this.goBack());
+    ev.detail.register(0, () => this.back());
   }
 
   /**
@@ -105,7 +105,7 @@ export class Router implements ComponentInterface {
    * Go back to previous page in the window.history.
    */
   @Method()
-  goBack() {
+  back() {
     this.win.history.back();
     return Promise.resolve(this.waitPromise);
   }