mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
70e4c3f6a6
Improve the accessibility of the SVG tree visualizations by employing `<title>` and `aria-labelledby`. PR Close #62396
115 lines
4.2 KiB
HTML
115 lines
4.2 KiB
HTML
<div class="filter">
|
|
<input (input)="searchRoutes($event)" placeholder="Search routes" class="ng-input filter-input" />
|
|
<div class="show-full-path">
|
|
<input id="show-full-path" type="checkbox" (change)="togglePathSettings()" />
|
|
<label for="show-full-path">Show full path</label>
|
|
</div>
|
|
</div>
|
|
<as-split unit="percent" direction="horizontal" [gutterSize]="9" class="visualization">
|
|
<aside class="legend" aria-hidden="true">
|
|
<ul>
|
|
<li class="eager">Eager-loaded route</li>
|
|
<li class="lazy">Lazy-loaded route</li>
|
|
<li class="active">Active route</li>
|
|
</ul>
|
|
</aside>
|
|
<as-split-area size="70">
|
|
<as-split unit="percent" direction="vertical" [gutterSize]="9">
|
|
<as-split-area size="100">
|
|
<ng-tree-visualizer-host #routerTree a11yTitle="Router tree visualization" />
|
|
</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 class="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>
|