Fix global link params

projects/common/src/navigation/navigation.service.ts

@@ -14,8 +14,8 @@ import {
   UrlTree
 } from '@angular/router';
 import { from, Observable, of } from 'rxjs';
-import { distinctUntilChanged, filter, map, share, skip, startWith, take } from 'rxjs/operators';
-import { throwIfNil } from '../utilities/lang/lang-utils';
+import { distinctUntilChanged, filter, map, share, skip, startWith, switchMap, take } from 'rxjs/operators';
+import { isEqualIgnoreFunctions, throwIfNil } from '../utilities/lang/lang-utils';
 import { Dictionary } from '../utilities/types/types';
 import { TraceRoute } from './trace-route';
 
@@ -124,6 +124,16 @@ export class NavigationService {
     };
   }
 
+  public buildNavigationParams$(
+    paramsOrUrl: NavigationParams | string
+  ): Observable<{ path: NavigationPath; extras?: NavigationExtras }> {
+    return this.navigation$.pipe(
+      switchMap(route => route.queryParams),
+      map(() => this.buildNavigationParams(paramsOrUrl)),
+      distinctUntilChanged(isEqualIgnoreFunctions)
+    );
+  }
+
   /**
    * Navigate within the app.
    * To be used for URLs with pattern '/partial_path' or 'partial_path'

projects/components/src/link/link.component.test.ts

@@ -2,13 +2,16 @@ import { RouterLinkWithHref } from '@angular/router';
 import { NavigationService } from '@hypertrace/common';
 import { createHostFactory, mockProvider, SpectatorHost } from '@ngneat/spectator/jest';
 import { MockDirective } from 'ng-mocks';
+import { of } from 'rxjs';
+import { LetAsyncModule } from '../let-async/let-async.module';
 import { LinkComponent } from './link.component';
 
 describe('Link component', () => {
   let spectator: SpectatorHost<LinkComponent>;
 
   const createHost = createHostFactory({
     component: LinkComponent,
+    imports: [LetAsyncModule],
     providers: [mockProvider(NavigationService)],
     declarations: [MockDirective(RouterLinkWithHref)]
   });
@@ -32,16 +35,18 @@ describe('Link component', () => {
       },
       providers: [
         mockProvider(NavigationService, {
-          buildNavigationParams: jest.fn().mockReturnValue({
-            path: [
-              '/external',
-              {
-                url: 'http://test.hypertrace.ai',
-                navType: 'same_window'
-              }
-            ],
-            extras: { skipLocationChange: true }
-          })
+          buildNavigationParams$: jest.fn().mockReturnValue(
+            of({
+              path: [
+                '/external',
+                {
+                  url: 'http://test.hypertrace.ai',
+                  navType: 'same_window'
+                }
+              ],
+              extras: { skipLocationChange: true }
+            })
+          )
         })
       ]
     });
@@ -72,7 +77,7 @@ describe('Link component', () => {
       },
       providers: [
         mockProvider(NavigationService, {
-          buildNavigationParams: jest.fn().mockReturnValue({ path: ['test'], extras: {} })
+          buildNavigationParams$: jest.fn().mockReturnValue(of({ path: ['test'], extras: {} }))
         })
       ]
     });
@@ -97,7 +102,7 @@ describe('Link component', () => {
       },
       providers: [
         mockProvider(NavigationService, {
-          buildNavigationParams: jest.fn().mockReturnValue({ path: ['/test'], extras: {} })
+          buildNavigationParams$: jest.fn().mockReturnValue(of({ path: ['/test'], extras: {} }))
         })
       ]
     });
@@ -122,7 +127,7 @@ describe('Link component', () => {
       },
       providers: [
         mockProvider(NavigationService, {
-          buildNavigationParams: jest.fn().mockReturnValue({ path: ['/test'], extras: {} })
+          buildNavigationParams$: jest.fn().mockReturnValue(of({ path: ['/test'], extras: {} }))
         })
       ]
     });

projects/components/src/link/link.component.ts

@@ -2,20 +2,22 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/c
 import { NavigationExtras } from '@angular/router';
 import { NavigationParams, NavigationPath, NavigationService } from '@hypertrace/common';
 import { isNil } from 'lodash-es';
+import { EMPTY, Observable } from 'rxjs';
 
 @Component({
   selector: 'ht-link',
   styleUrls: ['./link.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <a
+      *htLetAsync="this.navData$ as navData"
       class="ht-link"
-      [ngClass]="{ disabled: this.disabled || !this.navigationPath }"
-      [routerLink]="this.navigationPath"
-      [queryParams]="this.navigationOptions?.queryParams"
-      [queryParamsHandling]="this.navigationOptions?.queryParamsHandling"
-      [skipLocationChange]="this.navigationOptions?.skipLocationChange"
-      [replaceUrl]="this.navigationOptions?.replaceUrl"
+      [ngClass]="{ disabled: this.disabled || !navData }"
+      [routerLink]="navData?.path"
+      [queryParams]="navData?.extras?.queryParams"
+      [queryParamsHandling]="navData?.extras?.queryParamsHandling"
+      [skipLocationChange]="navData?.extras?.skipLocationChange"
+      [replaceUrl]="navData?.extras?.replaceUrl"
     >
       <ng-content></ng-content>
     </a>
@@ -28,23 +30,16 @@ export class LinkComponent implements OnChanges {
   @Input()
   public disabled?: boolean;
 
-  public navigationPath?: NavigationPath;
-  public navigationOptions?: NavigationExtras;
+  public navData$: Observable<NavData> = EMPTY;
 
   public constructor(private readonly navigationService: NavigationService) {}
 
   public ngOnChanges(): void {
-    this.setNavigationParams();
+    this.navData$ = isNil(this.paramsOrUrl) ? EMPTY : this.navigationService.buildNavigationParams$(this.paramsOrUrl);
   }
+}
 
-  private setNavigationParams(): void {
-    if (isNil(this.paramsOrUrl)) {
-      this.navigationPath = undefined;
-      this.navigationOptions = undefined;
-    } else {
-      const { path, extras } = this.navigationService.buildNavigationParams(this.paramsOrUrl);
-      this.navigationPath = path;
-      this.navigationOptions = extras;
-    }
-  }
+interface NavData {
+  path: NavigationPath;
+  extras?: NavigationExtras;
 }

projects/components/src/link/link.module.ts

@@ -1,11 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { LetAsyncModule } from '../let-async/let-async.module';
 import { LinkComponent } from './link.component';
 
 @NgModule({
   declarations: [LinkComponent],
   exports: [LinkComponent],
-  imports: [CommonModule, RouterModule]
+  imports: [CommonModule, RouterModule, LetAsyncModule]
 })
 export class LinkModule {}