feat: add exportAs logic for isActive on routerLinkActive directive (#940)

implements #928

Author: Sean Perkins

nativescript-angular/router/ns-router-link-active.ts

@@ -53,12 +53,16 @@ import { NSRouterLink } from "./ns-router-link";
  *
  * @stable
  */
-@Directive({ selector: "[nsRouterLinkActive]" })
+@Directive({
+    selector: "[nsRouterLinkActive]",
+    exportAs: "routerLinkActive",
+})
 export class NSRouterLinkActive implements OnChanges, OnDestroy, AfterContentInit { // tslint:disable-line:max-line-length directive-class-suffix
     @ContentChildren(NSRouterLink) links: QueryList<NSRouterLink>;
 
     private classes: string[] = [];
     private subscription: Subscription;
+    private active: boolean = false;
 
     @Input() nsRouterLinkActiveOptions: { exact: boolean } = { exact: false };
 
@@ -70,6 +74,10 @@ export class NSRouterLinkActive implements OnChanges, OnDestroy, AfterContentIni
         });
     }
 
+    get isActive(): boolean {
+        return this.active;
+    }
+
     ngAfterContentInit(): void {
         this.links.changes.subscribe(() => this.update());
         this.update();
@@ -91,12 +99,16 @@ export class NSRouterLinkActive implements OnChanges, OnDestroy, AfterContentIni
         if (!this.links) {
             return;
         }
-
-        const currentUrlTree = this.router.parseUrl(this.router.url);
-        const isActiveLinks = this.reduceList(currentUrlTree, this.links);
-        this.classes.forEach(
-            c => this.renderer.setElementClass(
-                this.element.nativeElement, c, isActiveLinks));
+        const hasActiveLinks = this.hasActiveLinks();
+        // react only when status has changed to prevent unnecessary dom updates
+        if (this.active !== hasActiveLinks) {
+            const currentUrlTree = this.router.parseUrl(this.router.url);
+            const isActiveLinks = this.reduceList(currentUrlTree, this.links);
+            this.classes.forEach(
+                c => this.renderer.setElementClass(
+                    this.element.nativeElement, c, isActiveLinks));
+        }
+        Promise.resolve(hasActiveLinks).then(active => this.active = active);
     }
 
     private reduceList(currentUrlTree: UrlTree, q: QueryList<any>): boolean {
@@ -106,4 +118,14 @@ export class NSRouterLinkActive implements OnChanges, OnDestroy, AfterContentIni
                     this.nsRouterLinkActiveOptions.exact);
             }, false);
     }
+
+    private isLinkActive(router: Router): (link: NSRouterLink) => boolean {
+        return (link: NSRouterLink) =>
+            router.isActive(link.urlTree, this.nsRouterLinkActiveOptions.exact);
+    }
+
+    private hasActiveLinks(): boolean {
+        return this.links.some(this.isLinkActive(this.router));
+    }
+
 }

ng-sample/app/app.ts

@@ -132,14 +132,14 @@ const customPageFactoryProvider = {
 // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ActionBarTest));
 
 // router
-// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(RouterOutletAppComponent));
+platformNativeScriptDynamic().bootstrapModule(makeExampleModule(RouterOutletAppComponent));
 // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(PageRouterOutletAppComponent));
 // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(PageRouterOutletNestedAppComponent));
 // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ClearHistoryAppComponent));
 // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(LoginAppComponent));
 
 // animations
-platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationStatesTest));
+// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationStatesTest));
 // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationStatesMultiTest));
 // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationNgClassTest));
 // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationKeyframesTest));

ng-sample/app/examples/router/router-outlet-test.ts

@@ -49,14 +49,14 @@ class SecondComponent implements OnInit, OnDestroy {
     template: `
         <StackLayout>
             <StackLayout class="nav">
-                <Button text="First" nsRouterLinkActive="active" nsRouterLink="/first"></Button>
-                <Button text="Second(1)" nsRouterLinkActive="active" nsRouterLink="/second/1"></Button>           
+                <Button text="First" [class.rlaActive]="rla.isActive" nsRouterLinkActive="active" nsRouterLink="/first" #rla="routerLinkActive"></Button>
+                <Button text="Second(1)" nsRouterLinkActive="active" nsRouterLink="/second/1"></Button>
                 <Button text="Second(2)"
                     nsRouterLinkActive="active"
                     [nsRouterLink]="['/second', '2' ]">
                 </Button>
             </StackLayout>
-            
+
             <router-outlet></router-outlet>
         </StackLayout>
     `

ng-sample/app/examples/router/styles.css

@@ -5,8 +5,8 @@
 }
 
 .subtitle {
-    font-size: 20; 
-    horizontal-align: center; 
+    font-size: 20;
+    horizontal-align: center;
     margin: 10;
 }
 
@@ -53,17 +53,21 @@ button {
     horizontal-align: center;
 }
 
-.odd { 
-    background-color: white; 
+.odd {
+    background-color: white;
     margin: 2;
 }
 
-.even { 
-    background-color: whitesmoke; 
-    margin: 2; 
+.even {
+    background-color: whitesmoke;
+    margin: 2;
 }
 
 .stretch {
     horizontal-align: stretch;
     margin: 0 10;
-}
+}
+
+.rlaActive {
+    color:blue;
+}