각도 경로 재사용 구현 전략

이 기사는 주로 Angular 경로 재사용 전략에 대한 간략한 논의를 소개합니다. 편집자는 이것이 꽤 좋다고 생각하므로 지금 공유하고 참고로 제공하겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

1. 소개

라우팅은 실행 중에 구성 요소에 대해 상태 없이 작동합니다. 즉, 경로가 종료되면 구성 요소 상태도 삭제됩니다. 이는 대부분의 시나리오에서 합리적입니다.

그러나 때로는 특별한 요구 사항으로 인해 사람들이 반쯤 죽은 상태에 빠질 수 있습니다. 물론 이것은 모두 사용자 경험을 위한 것입니다. 사용자가 모바일 단말기에서 키워드를 통해 제품을 검색하고, 이러한 사망 여부 목록은 일반적으로 자동 다음 페이지 작업입니다. 이때 사용자가 마침내 두 번째 페이지로 스크롤하여 보고 싶은 제품을 찾으면 제품 세부 정보 페이지로 이동한 다음 다시 돌아옵니다. up... 사용자가 혼란스러워 합니다.

Angular 라우팅과 구성 요소는 RouterModule.forRoot를 통해 처음부터 관계를 형성합니다. 경로에 도달하면 ComponentFactoryResolver가 구성 요소를 빌드하는 데 사용됩니다.

각 경로가 반드시 일회성 소비일 필요는 없습니다. Angular는 RouteReuseStrategy를 사용하여 라우팅 상태를 실행하고 구성 요소 구축 방법을 결정합니다. 물론 처음에 언급한 것처럼 기본적으로(DefaultRouteReuseStrategy) 아무것도 처리되지 않습니다.

RouteReuseStrategy는 2부터 실험적이었고 지금도 여전히 오랫동안 신뢰할 수 있습니다.

2.RouteReuseStrategy

RouteReuseStrategy라고 부릅니다. 경로 재사용 전략은 복잡하지 않고 여러 가지 이해하기 쉬운 방법을 제공합니다.

• shouldDetach 경로 재사용 허용 여부

• 경로가 떠날 때 트리거됩니다. 저장된 경로

• shouldAttach는 경로

• 검색을 허용합니다. 저장된 경로 가져오기

• shouldReuseRoute는 경로에 들어갈 때 트리거됩니다.

이것은 타임라인 관계와 같습니다. 현지어로는 다음과 같습니다. 재사용을 허용하도록 경로/목록을 설정한 다음 shouldReuseRoute가 설정되면 저장소에 경로 스냅샷을 저장합니다. /list 경로를 다시 만난 후 경로를 재사용해야 하는 경우 먼저 shouldAttach가 복원을 허용하는지 확인하고 마지막으로 구성 요소 검색 및 빌드에서 경로 스냅샷을 가져옵니다.

이 원리를 이해하면 처음에 검색 목록에서 반환된 문제를 취하면 매우 쉽게 풀 수 있습니다.

3. 예

위에서 설명한 것처럼 경로 활용 전략을 사용자 정의하려면 RouteReuseStrategy 인터페이스만 구현하면 됩니다.

1. 전략을 만듭니다.

import {RouteReuseStrategy, DefaultUrlSerializer, ActivatedRouteSnapshot, DetachedRouteHandle} from '@angular/router';

export class SimpleReuseStrategy implements RouteReuseStrategy {

  _cacheRouters: { [key: string]: any } = {};

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return true;
  }
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    this._cacheRouters[route.routeConfig.path] = {
      snapshot: route,
      handle: handle
    };
  }
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return !!this._cacheRouters[route.routeConfig.path];
  }
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    return this._cacheRouters[route.routeConfig.path].handle;
  }
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }
}

데이터 캐싱을 위한 _cacheRouters를 정의합니다(라우팅 스냅샷 및 현재 구성 요소 인스턴스 개체).

shouldDetach는 true를 직접 반환하여 모든 경로에 재사용이 허용됨을 나타냅니다.
store는 경로가 떠날 때 트리거됩니다. 경로를 키로 사용하여 라우팅 스냅샷 및 구성 요소 현재 인스턴스 객체를 저장합니다. 경로는 RouterModule.forRoot의 구성과 동일합니다.
shouldAttach 캐시에 경로가 존재하면 해당 경로를 복원할 수 있는 것으로 간주합니다.
retrieve 캐시에서 스냅샷을 가져오고, 없으면 null을 반환합니다.
shouldReuseRoute 라우팅 트리거 입력 동일한 경로인지 확인하기 위해
2. 등록

마지막으로 전략을 모듈에 등록합니다:

providers: [
 { provide: RouteReuseStrategy, useClass: SimpleReuseStrategy }
]

다음과 같은 라우팅 구성이 있다고 가정합니다:

RouterModule.forRoot([
 { path: 'search', component: SearchComponent },
 { path: 'edit/:id', component: EditComponent }
])

검색 구성 요소가 검색 작업에 사용됩니다. 검색 결과를 바탕으로 편집 페이지로 이동한 후 저장 후 돌아옵니다. 최종 검색 결과 상태(이 부분의 코드는 게시하지 않겠습니다. plnkr을 보고 싶습니다.)

4. 결론

위 내용은 단순한 소개일 뿐입니다. 사실 스크롤바 위치, 캐시 정리 등 재사용 여부 판단이 더 복잡해집니다.

이 경로 재사용 전략 메커니즘을 잘 활용하면 많은 웹 경험 문제를 해결할 수 있습니다.

관련 권장 사항:

angular2 라우팅 사전 로드 예시 자세한 설명

위 내용은 각도 경로 재사용 구현 전략의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!