## 경로를 선택적으로 저장하고 삭제하여 Angular 2 라우팅 성능을 최적화하려면 어떻게 해야 합니까?

Angular 2에서 RouteReuseStrategy를 사용하여 특정 경로 저장 및 삭제

문제 설명

Angular 2 애플리케이션에서 라우팅을 구현할 때 특정 경로가 필요할 수 있습니다. 재방문 시 더 빠른 렌더링을 위해 메모리에 저장됩니다. 그러나 리소스의 상세 보기와 같은 일부 경로의 경우 리소스를 절약하기 위해 메모리에서 해당 경로를 삭제하는 것이 좋습니다.

솔루션 개요

Angular 2는 RouteReuseStrategy 인터페이스를 제공하여 경로 저장 및 검색. 이 인터페이스를 구현하고 Angular 모듈에 제공하면 경로를 저장해야 하는 시점과 삭제해야 하는 시점에 대한 사용자 지정 동작을 정의할 수 있습니다.

RouteReuseStrategy 구현

shouldDetach

shouldDetach 메소드에서는 경로를 저장해야 하는지 결정할 수 있습니다. true를 반환하면 Angular는 경로를 저장합니다. 일반적으로 경로 경로를 확인하고 미리 정의된 기준 집합에 따라 저장할지 여부를 결정합니다.

store

shouldDetach가 true를 반환하면 store 메소드가 호출되어 경로를 저장합니다. 노선. 이 메서드를 구현하여 나중에 재사용할 수 있도록 ActivatedRouteSnapshot 및 DetachedRouteHandle을 저장할 수 있습니다.

shouldAttach

shouldAttach 메서드에서는 경로를 재사용해야 하는지 확인할 수 있습니다. true를 반환하면 Angular는 저장된 경로 버전을 사용하고 새 경로를 생성하지 않습니다. ActivatedRouteSnapshot 및 queryParams를 사용하면 수신 경로를 저장된 경로의 속성과 비교하여 일치하는지 확인할 수 있습니다.

retrieve

shouldAttach가 true를 반환하면 검색 메서드가 호출되어 저장된 버전을 검색합니다. 경로의. 매장에 저장된 DetachedRouteHandle을 사용하여 올바른 경로를 식별하고 반환할 수 있습니다.

사용 예

예를 들어, 검색 결과 페이지를 저장하려는 애플리케이션이 아닌 개별 애플리케이션을 고려해보세요. 리소스 세부정보 페이지입니다. 구현 방법은 다음과 같습니다.

<code class="typescript">import { ActivatedRouteSnapshot, RouteReuseStrategy, DetachedRouteHandle } from '@angular/router';

export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  private storedRoutes: { [key: string]: RouteStorageObject } = {};

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    if (route.routeConfig.path === 'search/:term') {
      return true;
    }
    return false;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    if (shouldDetach(route)) {
      this.storedRoutes[route.routeConfig.path] = { snapshot: route, handle };
    }
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    if (this.storedRoutes.hasOwnProperty(route.routeConfig.path)) {
      return true;
    }
    return false;
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    if (shouldAttach(route)) {
      return this.storedRoutes[route.routeConfig.path].handle;
    }
    return null;
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }
}</code>

AppModule에서:

<code class="typescript">@NgModule({
  [...],
  providers: [
    { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }
  ]
})
export class AppModule {}</code>

이 전략을 제공함으로써 Angular는 정의한 규칙에 따라 경로 저장 및 검색을 자동으로 관리합니다. , 애플리케이션 성능을 최적화할 수 있습니다.

위 내용은 ## 경로를 선택적으로 저장하고 삭제하여 Angular 2 라우팅 성능을 최적화하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!