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;