Angular 2 애플리케이션에서 라우팅을 구현할 때 특정 경로가 필요할 수 있습니다. 재방문 시 더 빠른 렌더링을 위해 메모리에 저장됩니다. 그러나 리소스의 상세 보기와 같은 일부 경로의 경우 리소스를 절약하기 위해 메모리에서 해당 경로를 삭제하는 것이 좋습니다.
Angular 2는 RouteReuseStrategy 인터페이스를 제공하여 경로 저장 및 검색. 이 인터페이스를 구현하고 Angular 모듈에 제공하면 경로를 저장해야 하는 시점과 삭제해야 하는 시점에 대한 사용자 지정 동작을 정의할 수 있습니다.
shouldDetach 메소드에서는 경로를 저장해야 하는지 결정할 수 있습니다. true를 반환하면 Angular는 경로를 저장합니다. 일반적으로 경로 경로를 확인하고 미리 정의된 기준 집합에 따라 저장할지 여부를 결정합니다.
shouldDetach가 true를 반환하면 store 메소드가 호출되어 경로를 저장합니다. 노선. 이 메서드를 구현하여 나중에 재사용할 수 있도록 ActivatedRouteSnapshot 및 DetachedRouteHandle을 저장할 수 있습니다.
shouldAttach 메서드에서는 경로를 재사용해야 하는지 확인할 수 있습니다. true를 반환하면 Angular는 저장된 경로 버전을 사용하고 새 경로를 생성하지 않습니다. ActivatedRouteSnapshot 및 queryParams를 사용하면 수신 경로를 저장된 경로의 속성과 비교하여 일치하는지 확인할 수 있습니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!