From 3fd1c0d5d974259c2fcdbc374df99413e9a77196 Mon Sep 17 00:00:00 2001 From: Nathan Walker Date: Tue, 18 Aug 2020 14:13:25 -0700 Subject: [PATCH] fix(router): link active directive --- e2e/animation-examples/tsconfig.tns.json | 7 ---- .../modal-dialogs/modal-dialog.component.ts | 25 +++++++------ e2e/tests-app-ng/package.json | 6 +-- e2e/tests-app-ng/tsconfig.json | 4 +- e2e/tests-app-ng/tsconfig.tns.json | 7 ---- .../router/ns-router-link-active.ts | 8 +++- nativescript-angular/router/ns-router-link.ts | 37 +++++++++++++------ 7 files changed, 52 insertions(+), 42 deletions(-) delete mode 100644 e2e/animation-examples/tsconfig.tns.json delete mode 100644 e2e/tests-app-ng/tsconfig.tns.json diff --git a/e2e/animation-examples/tsconfig.tns.json b/e2e/animation-examples/tsconfig.tns.json deleted file mode 100644 index a96f6bbc6..000000000 --- a/e2e/animation-examples/tsconfig.tns.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": "./tsconfig", - "compilerOptions": { - "module": "ESNext", - "moduleResolution": "node" - } -} diff --git a/e2e/tests-app-ng/app/modal/modal-dialogs/modal-dialog.component.ts b/e2e/tests-app-ng/app/modal/modal-dialogs/modal-dialog.component.ts index 1c069021b..eb2c0f84a 100644 --- a/e2e/tests-app-ng/app/modal/modal-dialogs/modal-dialog.component.ts +++ b/e2e/tests-app-ng/app/modal/modal-dialogs/modal-dialog.component.ts @@ -35,18 +35,15 @@ export class ModalContentComponent { } } -const TEMPLATE = ` - - - - - -`; - @Component({ selector: "modal-test", - providers: [ModalDialogService], - template: TEMPLATE + template: ` + + + + + + ` }) export class ModalTestComponent { public result: string = "---"; @@ -75,7 +72,13 @@ export class ModalTestComponent { @Component({ selector: "modal-test-on-push", changeDetection: ChangeDetectionStrategy.OnPush, - template: TEMPLATE + template: ` + + + + + + ` }) export class ModalTestWithPushStrategyComponent { public result: string = "---"; diff --git a/e2e/tests-app-ng/package.json b/e2e/tests-app-ng/package.json index 3e222dcd2..e9c720517 100644 --- a/e2e/tests-app-ng/package.json +++ b/e2e/tests-app-ng/package.json @@ -9,7 +9,7 @@ "version": "6.5.2" }, "tns-android": { - "version": "6.5.0" + "version": "6.5.3" } }, "dependencies": { @@ -37,11 +37,11 @@ "codelyzer": "^5.1.0", "filewalker": "^0.1.3", "lazy": "1.0.11", - "@nativescript/webpack": "rc", + "@nativescript/webpack": "~2.1.1", "typescript": "~3.9.0" }, "scripts": { - "clean": "npx rimraf hooks node_modules platforms package-lock.json", + "clean": "npx rimraf hooks node_modules platforms package-lock.json webpack.config.js && npm i", "setup": "cd ../../nativescript-angular && npm run prep.apps && cd ../e2e/tests-app-ng && npm run clean", "ngcc": "ngcc --properties es2015 module main --first-only", "postinstall": "npm run ngcc", diff --git a/e2e/tests-app-ng/tsconfig.json b/e2e/tests-app-ng/tsconfig.json index 3b4231662..f37dc8578 100644 --- a/e2e/tests-app-ng/tsconfig.json +++ b/e2e/tests-app-ng/tsconfig.json @@ -1,7 +1,8 @@ { "compilerOptions": { - "module": "esnext", + "module": "ESNext", "target": "es2015", + "moduleResolution": "node", "experimentalDecorators": true, "emitDecoratorMetadata": true, "noEmitHelpers": true, @@ -20,6 +21,7 @@ } }, "files": [ + "./references.d.ts", "./app/main.ts" ], "exclude": [ diff --git a/e2e/tests-app-ng/tsconfig.tns.json b/e2e/tests-app-ng/tsconfig.tns.json deleted file mode 100644 index a96f6bbc6..000000000 --- a/e2e/tests-app-ng/tsconfig.tns.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": "./tsconfig", - "compilerOptions": { - "module": "ESNext", - "moduleResolution": "node" - } -} diff --git a/nativescript-angular/router/ns-router-link-active.ts b/nativescript-angular/router/ns-router-link-active.ts index 475dd7ead..75c1fe855 100644 --- a/nativescript-angular/router/ns-router-link-active.ts +++ b/nativescript-angular/router/ns-router-link-active.ts @@ -104,7 +104,13 @@ export class NSRouterLinkActive implements OnChanges, OnDestroy, AfterContentIni 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.setStyle(this.element.nativeElement, c, isActiveLinks)); + this.classes.forEach((c) => { + if (isActiveLinks) { + this.renderer.removeClass(this.element.nativeElement, c); + } else { + this.renderer.addClass(this.element.nativeElement, c); + } + }); } Promise.resolve(hasActiveLinks).then((active) => (this.active = active)); } diff --git a/nativescript-angular/router/ns-router-link.ts b/nativescript-angular/router/ns-router-link.ts index 00c9b0c59..b380d7178 100644 --- a/nativescript-angular/router/ns-router-link.ts +++ b/nativescript-angular/router/ns-router-link.ts @@ -1,4 +1,4 @@ -import { Directive, HostListener, Input } from '@angular/core'; +import { Directive, Input, ElementRef, NgZone } from '@angular/core'; import { NavigationExtras } from '@angular/router'; import { ActivatedRoute, Router, UrlTree } from '@angular/router'; import { NavigationTransition } from '@nativescript/core'; @@ -52,7 +52,30 @@ export class NSRouterLink { private commands: any[] = []; - constructor(private router: Router, private navigator: RouterExtensions, private route: ActivatedRoute) {} + constructor(private ngZone: NgZone, private router: Router, private navigator: RouterExtensions, private route: ActivatedRoute, private el: ElementRef) { + } + + ngAfterViewInit() { + this.el.nativeElement.on('tap', () => { + this.ngZone.run(() => { + if (NativeScriptDebug.isLogEnabled()) { + NativeScriptDebug.routerLog(`nsRouterLink.tapped: ${this.commands} ` + `clear: ${this.clearHistory} ` + `transition: ${JSON.stringify(this.pageTransition)} ` + `duration: ${this.pageTransitionDuration}`); + } + + const extras = this.getExtras(); + // this.navigator.navigateByUrl(this.urlTree, extras); + this.navigator.navigate(this.commands, { + ...extras, + relativeTo: this.route, + queryParams: this.queryParams, + fragment: this.fragment, + preserveQueryParams: attrBoolValue(this.preserveQueryParams), + queryParamsHandling: this.queryParamsHandling, + preserveFragment: attrBoolValue(this.preserveFragment), + }); + }); + }); + } @Input('nsRouterLink') set params(data: any[] | string) { @@ -63,16 +86,6 @@ export class NSRouterLink { } } - @HostListener('tap') - onTap() { - if (NativeScriptDebug.isLogEnabled()) { - NativeScriptDebug.routerLog(`nsRouterLink.tapped: ${this.commands} ` + `clear: ${this.clearHistory} ` + `transition: ${JSON.stringify(this.pageTransition)} ` + `duration: ${this.pageTransitionDuration}`); - } - - const extras = this.getExtras(); - this.navigator.navigateByUrl(this.urlTree, extras); - } - private getExtras(): NavigationExtras & NavigationOptions { const transition = this.getTransition(); return {