From 14fedb9a4448d627548248017024ee5d246da274 Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.mtza@gmail.com>
Date: Mon, 2 Apr 2018 21:20:59 +0200
Subject: [PATCH] fix(angular): URL based tabs

---
 .../src/directives/navigation/ion-router-outlet.ts  | 13 ++++++++++++-
 angular/src/directives/navigation/tab-delegate.ts   |  2 +-
 core/src/components/router-outlet/route-outlet.tsx  | 12 ++++++------
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/angular/src/directives/navigation/ion-router-outlet.ts b/angular/src/directives/navigation/ion-router-outlet.ts
index 2c7ead046a..182f5a5bc3 100644
--- a/angular/src/directives/navigation/ion-router-outlet.ts
+++ b/angular/src/directives/navigation/ion-router-outlet.ts
@@ -23,7 +23,7 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     private parentContexts: ChildrenOutletContexts,
     private location: ViewContainerRef,
     private resolver: ComponentFactoryResolver,
-    elementRef: ElementRef,
+    private elementRef: ElementRef,
     @Attribute('name') name: string,
     @Optional() @Attribute('stack') stack: any,
     private changeDetector: ChangeDetectorRef,
@@ -142,6 +142,8 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     const direction = this.navCtrl.consumeDirection();
     await this.stackCtrl.setActive(enteringView, direction);
     this.activateEvents.emit(this.activated.instance);
+
+    emitEvent(this.elementRef.nativeElement);
   }
 
   canGoBack(deep = 1) {
@@ -153,6 +155,15 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
   }
 }
 
+function emitEvent(el: HTMLElement) {
+  console.log('ionRouterOutletActivated');
+  const event = new CustomEvent('ionRouterOutletActivated', {
+    bubbles: true,
+    cancelable: true,
+  });
+  el.dispatchEvent(event);
+}
+
 class OutletInjector implements Injector {
   constructor(
     private route: ActivatedRoute,
diff --git a/angular/src/directives/navigation/tab-delegate.ts b/angular/src/directives/navigation/tab-delegate.ts
index bed132a048..4c1e746f11 100644
--- a/angular/src/directives/navigation/tab-delegate.ts
+++ b/angular/src/directives/navigation/tab-delegate.ts
@@ -16,7 +16,7 @@ export class TabDelegate {
     elementRef.nativeElement.delegate = angularDelegate.create(cfr, injector);
   }
 
-  @HostListener('ionNavDidChange')
+  @HostListener('ionRouterOutletActivated', ['$event'])
   async onNavChanged() {
     const tab = this.elementRef.nativeElement as HTMLIonTabElement;
     await tab.componentOnReady();
diff --git a/core/src/components/router-outlet/route-outlet.tsx b/core/src/components/router-outlet/route-outlet.tsx
index fc4d928e4a..9384ecd148 100644
--- a/core/src/components/router-outlet/route-outlet.tsx
+++ b/core/src/components/router-outlet/route-outlet.tsx
@@ -48,9 +48,6 @@ export class RouterOutlet implements NavOutlet {
     }
     this.activeComponent = component;
 
-    // emit nav will change event
-    this.ionNavWillChange.emit();
-
     // attach entering view to DOM
     const enteringEl = await attachComponent(this.delegate, this.el, component, ['ion-page', 'hide-page'], params);
     const leavingEl = this.activeEl;
@@ -62,9 +59,6 @@ export class RouterOutlet implements NavOutlet {
     this.activeEl = enteringEl;
     detachComponent(this.delegate, leavingEl);
 
-    // emit nav changed event
-    this.ionNavDidChange.emit();
-
     return true;
   }
 
@@ -76,6 +70,9 @@ export class RouterOutlet implements NavOutlet {
     }
     this.isTransitioning = true;
 
+    // emit nav will change event
+    this.ionNavWillChange.emit();
+
     opts = opts || {};
 
     await transition({
@@ -91,6 +88,9 @@ export class RouterOutlet implements NavOutlet {
       baseEl: this.el,
     });
     this.isTransitioning = false;
+
+    // emit nav changed event
+    this.ionNavDidChange.emit();
     return true;
   }