fix(angular): support relative router links

Closes#17888, closes#16534, closes#16736, closes#16954

Author: daem0ndev

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

@@ -1,19 +1,18 @@
 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{BehaviorSubject,Observable}from'rxjs';
+import{distinctUntilChanged,filter,switchMap}from'rxjs/operators';
 import{Config}from'../../providers/config';
 import{NavController}from'../../providers/nav-controller';
-
 import{StackController}from'./stack-controller';
-import{RouteView,getUrl}from'./stack-utils';
+import{getUrl,RouteView}from'./stack-utils';
 
 @Directive({
 selector: 'ion-router-outlet',
 exportAs: 'outlet',
 inputs: ['animated','swipeGesture']
 })
 exportclassIonRouterOutletimplementsOnDestroy,OnInit{
-
 privateactivated: ComponentRef<any>|null=null;
 privateactivatedView: RouteView|null=null;
 
@@ -23,6 +22,12 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
 privatestackCtrl: StackController;
 privatenativeEl: HTMLIonRouterOutletElement;
 
+// Maintain map of activated route proxies for each component instance
+privateproxyMap=newWeakMap<any,ActivatedRoute>();
+
+// Keep the latest activated route in a subject for the proxy routes to switch map to
+privatecurrentActivatedRoute$=newBehaviorSubject<{component: any;activatedRoute: ActivatedRoute}|null>(null);
+
 tabsPrefix: string|undefined;
 
  @Output()stackEvents=newEventEmitter<any>();
@@ -159,20 +164,31 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
 constcontext=this.getContext()!;
 context.children['contexts']=saved;
 }
+// Updated activated route proxy for this component
+this.updateActivatedRouteProxy(cmpRef.instance,activatedRoute);
 }else{
 constsnapshot=(activatedRouteasany)._futureSnapshot;
 constcomponent=snapshot.routeConfig!.componentasany;
 resolver=resolver||this.resolver;
 
 constfactory=resolver.resolveComponentFactory(component);
 constchildContexts=this.parentContexts.getOrCreateContext(this.name).children;
+constactivatedRouteProxy=this.createActivatedRouteProxy(activatedRoute);
 
-constinjector=newOutletInjector(activatedRoute,childContexts,this.location.injector);
+constinjector=newOutletInjector(activatedRouteProxy,childContexts,this.location.injector);
 cmpRef=this.activated=this.location.createComponent(factory,this.location.length,injector);
 
 // Calling `markForCheck` to make sure we will run the change detection when the
 // `RouterOutlet` is inside a `ChangeDetectionStrategy.OnPush` component.
 enteringView=this.stackCtrl.createView(this.activated,activatedRoute);
+
+// Once the component is created, use the component instance to setup observables
+this.setupProxyObservables(activatedRouteProxy,cmpRef.instance);
+
+// Store references to the proxy by component
+this.proxyMap.set(cmpRef.instance,activatedRouteProxy);
+this.currentActivatedRoute$.next({component: cmpRef.instance, activatedRoute });
+
 this.changeDetector.markForCheck();
 }
 
@@ -212,6 +228,60 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
 getActiveStackId(): string|undefined{
 returnthis.stackCtrl.getActiveStackId();
 }
+
+/**
+ * Creates a proxy object that we can use to update activated route properties without losing reference
+ * in the component injector
+ */
+privatecreateActivatedRouteProxy(activatedRoute: ActivatedRoute): ActivatedRoute{
+constproxy: any=newActivatedRoute();
+proxy._futureSnapshot=(activatedRouteasany)._futureSnapshot;
+proxy._routerState=(activatedRouteasany)._routerState;
+proxy.snapshot=activatedRoute.snapshot;
+proxy.outlet=activatedRoute.outlet;
+proxy.component=activatedRoute.component;
+
+returnproxyasActivatedRoute;
+}
+
+privatesetupProxyObservables(proxy: ActivatedRoute,component: any): void{
+(proxyasany)._paramMap=this.proxyObservable(component,'paramMap');
+(proxyasany)._queryParamMap=this.proxyObservable(component,'queryParamMap');
+proxy.url=this.proxyObservable(component,'url');
+proxy.params=this.proxyObservable(component,'params');
+proxy.queryParams=this.proxyObservable(component,'queryParams');
+proxy.fragment=this.proxyObservable(component,'fragment');
+proxy.data=this.proxyObservable(component,'data');
+}
+
+/**
+ * Create a wrapped observable that will switch to the latest activated route matched by the given view id
+ */
+privateproxyObservable(component: any,path: string): Observable<any>{
+returnthis.currentActivatedRoute$.pipe(
+filter(current=>current!==null&&current.component===component),
+switchMap(current=>current&&(current.activatedRouteasany)[path]),
+distinctUntilChanged()
+);
+}
+
+/**
+ * Updates the given proxy route with data from the new incoming route
+ */
+privateupdateActivatedRouteProxy(component: any,activatedRoute: ActivatedRoute): void{
+constproxy=this.proxyMap.get(component);
+if(!proxy){
+thrownewError(`Could not find activated route proxy for view`);
+}
+
+(proxyasany)._futureSnapshot=(activatedRouteasany)._futureSnapshot;
+(proxyasany)._routerState=(activatedRouteasany)._routerState;
+proxy.snapshot=activatedRoute.snapshot;
+proxy.outlet=activatedRoute.outlet;
+proxy.component=activatedRoute.component;
+
+this.currentActivatedRoute$.next({ component, activatedRoute });
+}
 }
 
 classOutletInjectorimplementsInjector{