fix(angular): adds tabs stack

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

@@ -184,6 +184,11 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
   pop(deep = 1) {
     return this.stackCtrl.pop(deep);
   }
+
+  getLastUrl() {
+    const active = this.stackCtrl.getActive();
+    return active ? active.fullpath : undefined;
+  }
 }
 
 function emitEvent(el: HTMLElement) {

angular/src/directives/navigation/tab-delegate.ts

@@ -1,5 +1,6 @@
-import { ComponentFactoryResolver, Directive, ElementRef, HostListener, Injector, ViewContainerRef } from '@angular/core';
+import { ComponentFactoryResolver, ContentChild, Directive, ElementRef, HostListener, Injector, ViewContainerRef } from '@angular/core';
 import { AngularDelegate } from '../../providers/angular-delegate';
+import { IonRouterOutlet } from './ion-router-outlet';
 
 
 @Directive({
@@ -7,19 +8,32 @@ import { AngularDelegate } from '../../providers/angular-delegate';
 })
 export class TabDelegate {
 
+  @ContentChild(IonRouterOutlet) outlet?: IonRouterOutlet;
+
+  private nativeEl: HTMLIonTabElement;
+
   constructor(
-    private elementRef: ElementRef,
+    elementRef: ElementRef,
     resolver: ComponentFactoryResolver,
     injector: Injector,
     angularDelegate: AngularDelegate,
     location: ViewContainerRef
   ) {
-    elementRef.nativeElement.delegate = angularDelegate.create(resolver, injector, location);
+    this.nativeEl = elementRef.nativeElement;
+    this.nativeEl.delegate = angularDelegate.create(resolver, injector, location);
+  }
+
+  get tab() {
+    return this.nativeEl.tab;
+  }
+
+  getLastUrl() {
+    return this.outlet ? this.outlet.getLastUrl() : undefined;
   }
 
   @HostListener('ionRouterOutletActivated', ['$event'])
   async onNavChanged() {
-    const tab = this.elementRef.nativeElement as HTMLIonTabElement;
+    const tab = this.nativeEl;
     await tab.componentOnReady();
     const tabs = tab.closest('ion-tabs');
     if (tabs) {

angular/src/directives/navigation/tabs-delegate.ts

@@ -1,25 +1,38 @@
-import { Directive, ElementRef, HostListener, Optional } from '@angular/core';
-import { Router } from '@angular/router';
+import { ContentChildren, Directive, ElementRef, HostListener, Optional, QueryList } from '@angular/core';
+import { TabDelegate } from './tab-delegate';
+import { TabButtonClickDetail } from '@ionic/core';
+import { NavController } from '../../providers';
 
 @Directive({
   selector: 'ion-tabs'
 })
 export class TabsDelegate {
 
+  @ContentChildren(TabDelegate) tabs: QueryList<TabDelegate>;
+
   constructor(
-    @Optional() private router: Router,
+    @Optional() private navCtrl: NavController,
     elementRef: ElementRef
   ) {
-    if (router) {
-      elementRef.nativeElement.useRouter = true;
-    }
+    const nativeEl = elementRef.nativeElement as HTMLIonTabsElement;
+    nativeEl.useRouter = true;
+  }
+
+  urlForTab(tab: string) {
+    const tabDelegate = this.tabs.find(item => item.tab === tab);
+    return tabDelegate ? tabDelegate.getLastUrl() : undefined;
   }
 
   @HostListener('ionTabButtonClick', ['$event'])
-  onTabbarClick(ev: UIEvent) {
-    const tabElm: HTMLIonTabButtonElement = ev.detail as any;
-    if (this.router && tabElm && tabElm.href) {
-      this.router.navigateByUrl(tabElm.href);
+  onTabbarClick(ev: any) {
+    const detail = ev.detail as TabButtonClickDetail;
+    const { tab, href, selected } = detail;
+    if (tab && href) {
+      const url = selected
+        ? href
+        : this.urlForTab(tab) || href;
+
+      this.navCtrl.navigateBack(url, true);
     }
   }
 }

angular/src/directives/proxies.ts

@@ -869,7 +869,7 @@ export class TabButton {
 }
 
 export declare interface Tabs extends StencilComponents<'IonTabs'> {}
-@Component({ selector: 'ion-tabs', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>' })
+@Component({ selector: 'ion-tabs', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['useRouter'] })
 export class Tabs {
   ionChange: EventEmitter<CustomEvent>;
   ionNavWillLoad: EventEmitter<CustomEvent>;
@@ -880,6 +880,7 @@ export class Tabs {
     c.detach();
     const el = r.nativeElement;
     proxyMethods(this, el, ['select', 'setRouteId', 'getRouteId', 'getTab', 'getSelected']);
+    proxyInputs(this, el, ['useRouter']);
     proxyOutputs(this, el, ['ionChange', 'ionNavWillLoad', 'ionNavWillChange', 'ionNavDidChange']);
   }
 }