ルートの動作のカスタマイズ

provideRouter(routes, withRouterConfig({canceledNavigationResolution: 'computed'}));

provideRouter(routes, withRouterConfig({onSameUrlNavigation: 'reload'}));

router.navigate(['/some-path'], {onSameUrlNavigation: 'reload'});

provideRouter(routes, withRouterConfig({paramsInheritanceStrategy: 'always'}));

export const routes: Routes = [  {    path: 'org/:orgId',    component: Organization,    children: [      {        path: 'projects/:projectId',        component: Project,        children: [          {            path: 'customers/:customerId',            component: Customer,          },        ],      },    ],  },];

@Component({  /* ... */})export class CustomerComponent {  private route = inject(ActivatedRoute);  orgId = this.route.parent?.parent?.snapshot.params['orgId'];  projectId = this.route.parent?.snapshot.params['projectId'];  customerId = this.route.snapshot.params['customerId'];}

/org/:orgId/projects/:projectId/customers/:customerId

@Component({  /* ... */})export class CustomerComponent {  private route = inject(ActivatedRoute);  // All parent parameters are available directly  orgId = this.route.snapshot.params['orgId'];  projectId = this.route.snapshot.params['projectId'];  customerId = this.route.snapshot.params['customerId'];}

provideRouter(routes, withRouterConfig({urlUpdateStrategy: 'eager'}));

provideRouter(routes, withRouterConfig({defaultQueryParamsHandling: 'merge'}));

import {  RouteReuseStrategy,  Route,  ActivatedRouteSnapshot,  DetachedRouteHandle,} from '@angular/router';import {Injectable} from '@angular/core';@Injectable()export class CustomRouteReuseStrategy implements RouteReuseStrategy {  private handlers = new Map<Route | null, DetachedRouteHandle>();  shouldDetach(route: ActivatedRouteSnapshot): boolean {    // Determines if a route should be stored for later reuse    return route.data['reuse'] === true;  }  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {    // Stores the detached route handle when shouldDetach returns true    if (handle && route.data['reuse'] === true) {      const key = this.getRouteKey(route);      this.handlers.set(key, handle);    }  }  shouldAttach(route: ActivatedRouteSnapshot): boolean {    // Checks if a stored route should be reattached    const key = this.getRouteKey(route);    return route.data['reuse'] === true && this.handlers.has(key);  }  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {    // Returns the stored route handle for reattachment    const key = this.getRouteKey(route);    return route.data['reuse'] === true ? (this.handlers.get(key) ?? null) : null;  }  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {    // Determines if the router should reuse the current route instance    return future.routeConfig === curr.routeConfig;  }  private getRouteKey(route: ActivatedRouteSnapshot): Route | null {    return route.routeConfig;  }}

import {destroyDetachedRouteHandle} from '@angular/router';// ... inside your strategyif (this.handles.size > MAX_CACHE_SIZE) {  const handle = this.handles.get(oldestKey);  if (handle) {    destroyDetachedRouteHandle(handle);    this.handles.delete(oldestKey);  }}

import {provideRouter, withExperimentalAutoCleanupInjectors} from '@angular/router';export const appConfig: ApplicationConfig = {  providers: [    provideRouter(routes, withExperimentalAutoCleanupInjectors())  ]};

@Injectable()export class CustomRouteReuseStrategy implements RouteReuseStrategy {  // ... other methods  shouldDestroyInjector(route: Route): boolean {    return !route.data['retainInjector'];  }}

@Injectable()export class CustomRouteReuseStrategy implements RouteReuseStrategy {  private readonly handles = new Map<Route, DetachedRouteHandle>();  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null) {    this.handles.set(route.routeConfig!, handle);  }  retrieveStoredRouteHandles(): DetachedRouteHandle {    return Array.from(this.handles.values());  }  // ... other methods}

export const routes: Routes = [  {    path: 'products',    component: ProductListComponent,    data: {reuse: true}, // Component state persists across navigations  },  {    path: 'products/:id',    component: ProductDetailComponent,    // No reuse flag - component recreates on each navigation  },  {    path: 'search',    component: SearchComponent,    data: {reuse: true}, // Preserves search results and filter state  },];

export const appConfig: ApplicationConfig = {  providers: [    provideRouter(routes),    {provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy},  ],};

import {ApplicationConfig} from '@angular/core';import {provideRouter, withPreloading, PreloadAllModules} from '@angular/router';import {routes} from './app.routes';export const appConfig: ApplicationConfig = {  providers: [provideRouter(routes, withPreloading(PreloadAllModules))],};

import {Injectable} from '@angular/core';import {PreloadingStrategy, Route} from '@angular/router';import {Observable, of, timer} from 'rxjs';import {mergeMap} from 'rxjs/operators';@Injectable()export class SelectivePreloadingStrategy implements PreloadingStrategy {  preload(route: Route, load: () => Observable<any>): Observable<any> {    // Only preload routes marked with data: { preload: true }    if (route.data?.['preload']) {      return load();    }    return of(null);  }}

import {Routes} from '@angular/router';export const routes: Routes = [  {    path: 'dashboard',    loadChildren: () => import('./dashboard/dashboard.routes'),    data: {preload: true}, // Preload immediately after initial navigation  },  {    path: 'reports',    loadChildren: () => import('./reports/reports.routes'),    data: {preload: false}, // Only load when user navigates to reports  },  {    path: 'admin',    loadChildren: () => import('./admin/admin.routes'),    // No preload flag - won't be preloaded  },];

import {Injectable} from '@angular/core';import {UrlHandlingStrategy, UrlTree} from '@angular/router';@Injectable()export class CustomUrlHandlingStrategy implements UrlHandlingStrategy {  shouldProcessUrl(url: UrlTree): boolean {    // Only handle URLs that start with /app or /admin    return url.toString().startsWith('/app') || url.toString().startsWith('/admin');  }  extract(url: UrlTree): UrlTree {    // Return the URL unchanged if we should process it    return url;  }  merge(newUrlPart: UrlTree, rawUrl: UrlTree): UrlTree {    // Combine the URL fragment with the rest of the URL    return newUrlPart;  }}

import {ApplicationConfig} from '@angular/core';import {provideRouter} from '@angular/router';import {UrlHandlingStrategy} from '@angular/router';export const appConfig: ApplicationConfig = {  providers: [    provideRouter(routes),    {provide: UrlHandlingStrategy, useClass: CustomUrlHandlingStrategy},  ],};

import {Route, UrlSegment, UrlSegmentGroup, UrlMatchResult} from '@angular/router';export function customMatcher(  segments: UrlSegment[],  group: UrlSegmentGroup,  route: Route,): UrlMatchResult | null {  // Matching logic here  if (matchSuccessful) {    return {      consumed: segments,      posParams: {        paramName: new UrlSegment('paramValue', {}),      },    };  }  return null;}

import {Routes, UrlSegment, UrlMatchResult} from '@angular/router';export function versionMatcher(segments: UrlSegment[]): UrlMatchResult | null {  // Match patterns like /v1/docs, /v2.1/docs, /v3.0.1/docs  if (segments.length >= 2 && segments[0].path.match(/^v\d+(\.\d+)*$/)) {    return {      consumed: segments.slice(0, 2), // Consume version and 'docs'      posParams: {        version: segments[0], // Make version available as a parameter        section: segments[1], // Make section available too      },    };  }  return null;}// Route configurationexport const routes: Routes = [  {    matcher: versionMatcher,    component: DocumentationComponent,  },  {    path: 'latest/docs',    redirectTo: 'v3/docs',  },];

import { Component, input, inject } from '@angular/core';import { resource } from '@angular/core';@Component({  selector: 'app-documentation',  template: `    @if (documentation.isLoading()) {      <div>Loading documentation...</div>    } @else if (documentation.error()) {      <div>Error loading documentation</div>    } @else if (documentation.value(); as docs) {      <article>{{ docs.content }}</article>    }  `})export class DocumentationComponent {  // Route parameters are automatically bound to signal inputs  version = input.required<string>();  // Receives the version parameter  section = input.required<string>();  // Receives the section parameter  private docsService = inject(DocumentationService);  // Resource automatically loads documentation when version or section changes  documentation = resource({    params: () => {      if (!this.version() || !this.section()) return;      return {        version: this.version(),        section: this.section()      }    },    loader: ({ params }) => {      return this.docsService.loadDocumentation(params.version, params.section);    }  })}

// Supported localesconst locales = ['en', 'es', 'fr', 'de', 'ja', 'zh'];export function localeMatcher(segments: UrlSegment[]): UrlMatchResult | null {  if (segments.length > 0) {    const potentialLocale = segments[0].path;    if (locales.includes(potentialLocale)) {      // This is a locale prefix, consume it and continue matching      return {        consumed: [segments[0]],        posParams: {          locale: segments[0],        },      };    } else {      // No locale prefix, use default locale      return {        consumed: [], // Don't consume any segments        posParams: {          locale: new UrlSegment('en', {}),        },      };    }  }  return null;}

export function productMatcher(segments: UrlSegment[]): UrlMatchResult | null {  if (segments.length === 0) return null;  const firstSegment = segments[0].path;  // Books: /isbn-1234567890  if (firstSegment.startsWith('isbn-')) {    return {      consumed: [segments[0]],      posParams: {        productType: new UrlSegment('book', {}),        identifier: new UrlSegment(firstSegment.substring(5), {}),      },    };  }  // Electronics: /sku/ABC123  if (firstSegment === 'sku' && segments.length > 1) {    return {      consumed: segments.slice(0, 2),      posParams: {        productType: new UrlSegment('electronics', {}),        identifier: segments[1],      },    };  }  // Clothing: /style/BRAND/ITEM  if (firstSegment === 'style' && segments.length > 2) {    return {      consumed: segments.slice(0, 3),      posParams: {        productType: new UrlSegment('clothing', {}),        brand: segments[1],        identifier: segments[2],      },    };  }  return null;}