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

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'];}

@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;  }}

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;}