fix(angular): swipe to go backs in tabs (#16710)

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

@@ -22,7 +22,6 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
   private name: string;
   private stackCtrl: StackController;
   private nativeEl: HTMLIonRouterOutletElement;
-  private hasStack = false;
 
   tabsPrefix: string | undefined;
 
@@ -38,7 +37,7 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
   set swipeGesture(swipe: boolean) {
     this._swipeGesture = swipe;
 
-    this.nativeEl.swipeHandler = (swipe && this.hasStack) ? {
+    this.nativeEl.swipeHandler = swipe ? {
       canStart: () => this.stackCtrl.canGoBack(1),
       onStart: () => this.stackCtrl.startBackTransition(),
       onEnd: shouldContinue => this.stackCtrl.endBackTransition(shouldContinue)
@@ -87,7 +86,7 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     }
     this.nativeEl.componentOnReady().then(() => {
       if (this._swipeGesture === undefined) {
-        this.swipeGesture = this.config.get('swipeBackEnabled', this.nativeEl.mode === 'ios');
+        this.swipeGesture = this.config.getBoolean('swipeBackEnabled', this.nativeEl.mode === 'ios');
       }
     });
   }

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

@@ -66,7 +66,7 @@ export class StackController {
     });
   }
 
-  startBackTransition(stackId?: string) {
+  startBackTransition(stackId = this.getActiveStackId()) {
     const views = this.getStack(stackId);
     this.transition(
       views[views.length - 2], // entering view

angular/test/test-app/src/app/home-page/home-page.component.html

@@ -7,22 +7,22 @@
   </ion-header>
   <ion-content>
     <ion-list>
-      <ion-item href="/inputs">
+      <ion-item routerLink="/inputs">
         <ion-label>
           Inputs test
         </ion-label>
       </ion-item>
-      <ion-item href="/modals">
+      <ion-item routerLink="/modals">
         <ion-label>
           Modals test
         </ion-label>
       </ion-item>
-      <ion-item href="/router-link">
+      <ion-item routerLink="/router-link">
         <ion-label>
           Router link test
         </ion-label>
       </ion-item>
-      <ion-item href="/tabs">
+      <ion-item routerLink="/tabs">
         <ion-label>
           Tabs test
         </ion-label>

core/src/components/item/item.scss

@@ -62,13 +62,14 @@
 
   position: relative;
 
+  outline: none;
+
   color: var(--color);
 
   font-family: $font-family-base;
 
   text-align: initial;
   text-decoration: none;
-
   box-sizing: border-box;
 }