라우팅 규칙 동작 커스터마이징하기

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

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

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

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

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

@Component({/* ... */})
export class Customer {
  private route = inject(ActivatedRoute);

  // 모든 상위 라우팅 규칙 파라미터에 직접 접근할 수 있습니다.
  orgId = this.route.snapshot.params['orgId'];
  projectId = this.route.snapshot.params['projectId'];
  customerId = this.route.snapshot.params['customerId'];
}

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

@Component({/* ... */})
export class Customer {
  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'];
}

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

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

import {LocationStrategy, TrailingSlashPathLocationStrategy} from '@angular/common';
import {bootstrapApplication} from '@angular/platform-browser';

bootstrapApplication(App, {
  providers: [{provide: LocationStrategy, useClass: TrailingSlashPathLocationStrategy}],
});

import {LocationStrategy, NoTrailingSlashPathLocationStrategy} from '@angular/common';
import {bootstrapApplication} from '@angular/platform-browser';

bootstrapApplication(App, {
  providers: [{provide: LocationStrategy, useClass: NoTrailingSlashPathLocationStrategy}],
});

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 {
    // 이후 재사용을 위해 라우팅 규칙을 저장할지 결정합니다.
    return route.data['reuse'] === true;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {
    // shouldDetach가 true를 반환하면 분리된 라우팅 규칙 핸들을 저장합니다.
    if (handle && route.data['reuse'] === true) {
      const key = this.getRouteKey(route);
      this.handlers.set(key, handle);
    }
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    // 저장된 라우팅 규칙을 다시 연결할지 확인합니다.
    const key = this.getRouteKey(route);
    return route.data['reuse'] === true && this.handlers.has(key);
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    // 다시 연결할 수 있도록 저장된 라우팅 규칙 핸들을 반환합니다.
    const key = this.getRouteKey(route);
    return route.data['reuse'] === true ? (this.handlers.get(key) ?? null) : null;
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    // 현재 라우팅 규칙 인스턴스를 재사용할지 결정합니다.
    return future.routeConfig === curr.routeConfig;
  }

  private getRouteKey(route: ActivatedRouteSnapshot): Route | null {
    return route.routeConfig;
  }
}

import {destroyDetachedRouteHandle} from '@angular/router';

// ... 전략 내부
if (this.handles.size > MAX_CACHE_SIZE) {
  const handle = this.handles.get(oldestKey);
  if (handle) {
    destroyDetachedRouteHandle(handle);
    this.handles.delete(oldestKey);
  }
}

import {provideRouter, withAutoCleanupInjectors} from '@angular/router';
import {ApplicationConfig} from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes, withAutoCleanupInjectors())],
};

@Injectable()
export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  // ... 다른 메서드

  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) {
    if (handle) {
      this.handles.set(route.routeConfig!, handle);
    }
  }

  retrieveStoredRouteHandles(): DetachedRouteHandle[] {
    return Array.from(this.handles.values());
  }

  // ... 다른 메서드
}

export const routes: Routes = [
  {
    path: 'products',
    component: ProductList,
    data: {reuse: true}, // 내비게이션 사이에 컴포넌트 상태를 유지합니다.
  },
  {
    path: 'products/:id',
    component: ProductDetail,
    // 재사용 플래그가 없으므로 내비게이션마다 컴포넌트를 다시 생성합니다.
  },
  {
    path: 'search',
    component: Search,
    data: {reuse: true}, // 검색 결과와 필터 상태를 유지합니다.
  },
];

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> {
    // 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}, // 최초 내비게이션 직후 미리 로드합니다.
  },
  {
    path: 'reports',
    loadChildren: () => import('./reports/reports.routes'),
    data: {preload: false}, // 사용자가 reports로 이동할 때만 로드합니다.
  },
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.routes'),
    // 미리 로드 플래그가 없으므로 미리 로드하지 않습니다.
  },
];

import {Injectable} from '@angular/core';
import {UrlHandlingStrategy, UrlTree} from '@angular/router';

@Injectable()
export class CustomUrlHandlingStrategy implements UrlHandlingStrategy {
  shouldProcessUrl(url: UrlTree): boolean {
    // /app 또는 /admin으로 시작하는 URL만 처리합니다.
    return url.toString().startsWith('/app') || url.toString().startsWith('/admin');
  }

  extract(url: UrlTree): UrlTree {
    // 처리할 URL을 변경 없이 반환합니다.
    return url;
  }

  merge(newUrlPart: UrlTree, rawUrl: UrlTree): UrlTree {
    // URL 부분을 나머지 URL과 합칩니다.
    return newUrlPart;
  }
}

import {ApplicationConfig} from '@angular/core';
import {provideRouter, 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 {
  // 이곳에 매칭 로직을 작성합니다.
  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 {
  // /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), // 버전과 'docs' 세그먼트를 처리합니다.
      posParams: {
        version: segments[0], // 버전을 파라미터로 제공합니다.
        section: segments[1], // 섹션도 파라미터로 제공합니다.
      },
    };
  }
  return null;
}

// 라우팅 규칙 설정
export const routes: Routes = [
  {
    matcher: versionMatcher,
    component: Documentation,
  },
  {
    path: 'latest/docs',
    redirectTo: 'v3/docs',
  },
];

import {Component, input, inject, 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 Documentation {
  // 라우팅 규칙 파라미터는 입력 시그널에 자동으로 바인딩됩니다.
  version = input.required<string>(); // 버전 파라미터를 받습니다.
  section = input.required<string>(); // 섹션 파라미터를 받습니다.

  private docsService = inject(DocumentationService);

  // 버전이나 섹션이 바뀌면 리소스가 문서를 자동으로 불러옵니다.
  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);
    },
  });
}

// 지원하는 로케일
const 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)) {
      // 로케일 접두사를 처리하고 계속 매칭합니다.
      return {
        consumed: [segments[0]],
        posParams: {
          locale: segments[0],
        },
      };
    } else {
      // 로케일 접두사가 없으면 기본 로케일을 사용합니다.
      return {
        consumed: [], // 어떤 세그먼트도 처리하지 않습니다.
        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;

  // 도서: /isbn-1234567890
  if (firstSegment.startsWith('isbn-')) {
    return {
      consumed: [segments[0]],
      posParams: {
        productType: new UrlSegment('book', {}),
        identifier: new UrlSegment(firstSegment.substring(5), {}),
      },
    };
  }

  // 전자제품: /sku/ABC123
  if (firstSegment === 'sku' && segments.length > 1) {
    return {
      consumed: segments.slice(0, 2),
      posParams: {
        productType: new UrlSegment('electronics', {}),
        identifier: segments[1],
      },
    };
  }

  // 의류: /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;
}