fix(angular): URL based tabs

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,

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();

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;
   }