mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
582fedd726
- Update code to fix PR comments and cleanup code - Add unit tests for the new code PR Close #59999
135 lines
5.1 KiB
HTML
135 lines
5.1 KiB
HTML
<div class="router-tree-wrapper">
|
|
<as-split unit="pixel" direction="vertical" [gutterSize]="9" [disabled]="true">
|
|
<as-split-area size="50">
|
|
<div>
|
|
<input
|
|
matInput
|
|
(input)="searchRoutes($event)"
|
|
placeholder="Search routes"
|
|
class="filter-input"
|
|
/>
|
|
<mat-checkbox (change)="togglePathSettings()">Show Full Path</mat-checkbox>
|
|
</div>
|
|
</as-split-area>
|
|
<as-split-area>
|
|
<as-split unit="percent" direction="horizontal" [gutterSize]="9">
|
|
<as-split-area size="70">
|
|
<as-split unit="percent" direction="vertical" [gutterSize]="9">
|
|
<as-split-area size="100">
|
|
<ng-tree-visualizer-host #routerTree />
|
|
<section #routerTree class="router-tree router-graph router-tree-container">
|
|
<svg #routerTreeSvgContainer>
|
|
<g #routerTreeMainGroup></g>
|
|
</svg>
|
|
</section>
|
|
</as-split-area>
|
|
</as-split>
|
|
</as-split-area>
|
|
|
|
@let route = selectedRoute();
|
|
|
|
@if (route && route.data) {
|
|
<as-split-area size="30" minSize="20">
|
|
<div>
|
|
<div class="selected-node-title">
|
|
<h2 class="router-title">Routes Details</h2>
|
|
<mat-icon
|
|
class="close-icon"
|
|
fontIcon="close"
|
|
(click)="selectedRoute.set(null)"
|
|
></mat-icon>
|
|
</div>
|
|
|
|
<table id="route-details-table">
|
|
<tr
|
|
ng-route-details-row
|
|
label="Path"
|
|
type="chip"
|
|
[data]="route.data.path"
|
|
(click)="navigateRoute(route)"
|
|
></tr>
|
|
<tr
|
|
ng-route-details-row
|
|
label="Component"
|
|
type="chip"
|
|
[data]="route.data.component"
|
|
(click)="viewComponentSource(route.data.component)"
|
|
></tr>
|
|
@if (route.data.pathMatch) {
|
|
<tr ng-route-details-row label="Path Match" [data]="route.data.pathMatch"></tr>
|
|
}
|
|
@if (route?.data?.data?.length > 0) {
|
|
<tr ng-route-details-row label="Data" [data]="route.data.data | json"></tr>
|
|
}
|
|
@if (route.data.canActivateGuards && route.data.canActivateGuards.length > 0) {
|
|
<tr
|
|
ng-route-details-row
|
|
label="Can Activate Guards"
|
|
type="list"
|
|
[data]="route.data.canActivateGuards"
|
|
(click)="viewSourceFromRouter($event, 'canActivate')"
|
|
></tr>
|
|
}
|
|
@if (
|
|
route.data.canActivateChildGuards && route.data.canActivateChildGuards.length > 0
|
|
) {
|
|
<tr
|
|
ng-route-details-row
|
|
label="Can Activate Child Guards"
|
|
type="list"
|
|
[data]="route.data.canActivateChildGuards"
|
|
(click)="viewSourceFromRouter($event, 'canActivateChild')"
|
|
></tr>
|
|
}
|
|
@if (route.data.canDeactivateGuards && route.data.canDeactivateGuards.length > 0) {
|
|
<tr
|
|
ng-route-details-row
|
|
label="Can DeActivate Guards"
|
|
type="list"
|
|
[data]="route.data.canDeactivateGuards"
|
|
(click)="viewSourceFromRouter($event, 'canDeactivate')"
|
|
></tr>
|
|
}
|
|
@if (route.data.canMatchGuards && route.data.canMatchGuards.length > 0) {
|
|
<tr
|
|
ng-route-details-row
|
|
label="Can Match Guards"
|
|
type="list"
|
|
[data]="route.data.canMatchGuards"
|
|
(click)="viewSourceFromRouter($event, 'canMatch')"
|
|
></tr>
|
|
}
|
|
|
|
@if (route.data.providers && route.data.providers.length > 0) {
|
|
<tr
|
|
ng-route-details-row
|
|
label="Providers"
|
|
type="list"
|
|
[data]="route.data.providers"
|
|
(click)="viewSourceFromRouter($event, 'providers')"
|
|
></tr>
|
|
}
|
|
@if (route.data.title) {
|
|
<tr ng-route-details-row label="Title" [data]="route.data.title"></tr>
|
|
}
|
|
<tr
|
|
ng-route-details-row
|
|
label="Active"
|
|
type="flag"
|
|
[data]="route.data.isActive"
|
|
></tr>
|
|
<tr
|
|
ng-route-details-row
|
|
label="Auxiliary"
|
|
type="flag"
|
|
[data]="route.data.isAux"
|
|
></tr>
|
|
<tr ng-route-details-row label="Lazy" type="flag" [data]="route.data.isLazy"></tr>
|
|
</table>
|
|
</div>
|
|
</as-split-area>
|
|
}
|
|
</as-split>
|
|
</as-split-area>
|
|
</as-split>
|
|
</div>
|