): TreeNode[] {
+ return Object.keys(obj).map((key) => this.createNode(key, obj[key]));
+ }
+
+ private createNode(name: string, value: any): TreeNode {
+ const isExpandable = this.isObject(value);
+ return {
+ name,
+ value,
+ preview: this.getValuePreview(value),
+ isExpandable,
+ children: isExpandable ? this.buildTree(value) : [],
+ };
+ }
+
+ protected hasChild = (_: number, node: TreeNode): boolean => node.isExpandable;
+
+ protected handleViewSource(node: TreeNode): void {
+ this.viewSource.emit(node.value);
+ }
+
+ private getValuePreview(value: any): string {
+ const type = typeof value;
+
+ if (type === 'string') return value;
+ if (type === 'number' || type === 'boolean') return String(value);
+ if (Array.isArray(value)) return `[${value.length}]`;
+ if (type === 'object') return `{...}`;
+
+ return String(value);
+ }
+}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/route-details-row.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/route-details-row.component.html
index 5b3716f52e8..50d9540f9fd 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/route-details-row.component.html
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/route-details-row.component.html
@@ -18,18 +18,21 @@
}
}
@default {
-
-
- @if (rowValue() && renderValueAsJson()) {
- {{ rowValue() | json }}
- } @else {
- {{ rowValue() || '[empty string] ' }}
- }
-
+ } @else {
+
+ {{ rowValue() || '[empty string] ' }}
+
+ }
}
}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/route-details-row.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/route-details-row.component.ts
index 0fa7a2f7581..ab08a370c8e 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/route-details-row.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/route-details-row.component.ts
@@ -7,11 +7,12 @@
*/
import {Component, computed, input, output, ChangeDetectionStrategy} from '@angular/core';
-import {JsonPipe, NgTemplateOutlet} from '@angular/common';
+import {NgTemplateOutlet} from '@angular/common';
import {MatIcon} from '@angular/material/icon';
import {ButtonComponent} from '../../shared/button/button.component';
import {RouterTreeNode} from './router-tree-fns';
import {MatTooltip} from '@angular/material/tooltip';
+import {RouteDataTreeComponent} from './route-data-tree/route-data-tree.component';
export type RowType = 'text' | 'flag' | 'list';
export type ActionBtnType = 'none' | 'view-source' | 'navigate';
@@ -20,7 +21,7 @@ export type ActionBtnType = 'none' | 'view-source' | 'navigate';
selector: '[ng-route-details-row]',
templateUrl: './route-details-row.component.html',
styleUrls: ['./route-details-row.component.scss'],
- imports: [NgTemplateOutlet, ButtonComponent, JsonPipe, MatIcon, MatTooltip],
+ imports: [NgTemplateOutlet, ButtonComponent, MatIcon, MatTooltip, RouteDataTreeComponent],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class RouteDetailsRowComponent {
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.html
index 49e7ed7a0b7..6033923250c 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.html
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.html
@@ -94,6 +94,18 @@
[data]="data"
>
}
+ @if (data.resolvers && data.resolvers.length > 0) {
+ |
+ }
+
@if (data.canActivateGuards && data.canActivateGuards.length > 0) {
;
data?: any;
+ resolvers?: any;
path: string;
component: string;
redirectTo?: string;
diff --git a/devtools/src/app/demo-app/todo/routes/routes.module.ts b/devtools/src/app/demo-app/todo/routes/routes.module.ts
index 4253c95af7b..2d9876bce9a 100644
--- a/devtools/src/app/demo-app/todo/routes/routes.module.ts
+++ b/devtools/src/app/demo-app/todo/routes/routes.module.ts
@@ -9,10 +9,12 @@
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {
- ActivatedRouteSnapshot,
CanActivateFn,
RouterModule,
RouterStateSnapshot,
+ ActivatedRouteSnapshot,
+ Resolve,
+ ResolveFn,
} from '@angular/router';
import {
@@ -26,6 +28,13 @@ import {
Service4,
} from './routes.component';
+export const resolverFn: ResolveFn = (
+ route: ActivatedRouteSnapshot,
+ state: RouterStateSnapshot,
+) => {
+ return {data: 'Resolved Data from resolverFn'};
+};
+
export const activateGuard: CanActivateFn = (
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot,
@@ -66,6 +75,13 @@ export const activateGuard: CanActivateFn = (
message: 'Hello from route!!',
},
},
+ {
+ path: 'route-resolver',
+ component: RoutesHomeComponent,
+ resolve: {
+ resolvedData: resolverFn,
+ },
+ },
]),
],
declarations: [RoutesHomeComponent],