Angular 라우팅에서 전략을 재사용하는 방법

1. 소개

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

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

Angular 라우팅과 구성 요소는 처음부터 RouterModule.forRoot를 통해 관계를 형성합니다. 경로에 도달하면 ComponentFactoryResolver가 구성 요소를 빌드하는 데 사용됩니다. . RouterModule.forRoot 形成一种关系，当路由命中时利用 ComponentFactoryResolver 构建组件，这是路由的本质。

而每一个路由并不一定是一次性消费，Angular 利用 RouteReuseStrategy 贯穿路由状态并决定构建组件的方式；当然默认情况下（DefaultRouteReuseStrategy）像开头说的，一切都不进行任何处理。

RouteReuseStrategy 从2就已经是实验性，当前依然如此，这么久应该是可信任。

二、RouteReuseStrategy

RouteReuseStrategy 我称它为：路由复用策略；并不复杂，提供了几种办法通俗易懂的方法：

• shouldDetach 是否允许复用路由

• store 当路由离开时会触发，存储路由

• shouldAttach 是否允许还原路由

• retrieve 获取存储路由

• shouldReuseRoute 进入路由触发，是否同一路由时复用路由

这看起来就像是一个时间轴关系，用一种白话文像是这样：把路由 /list 设置为允许复用（shouldDetach），然后将路由快照存在 store 当中；当 shouldReuseRoute 成立时即：再次遇到 /list 路由后表示需要复用路由，先判断 shouldAttach 是否允许还原，最后从 retrieve 拿到路由快照并构建组件。

当理解这一原理时，假如我们拿开头搜索列表返回的问题就变得非常容易解决。

三、一个示例

诚如上面说明的，只需要实现 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 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象；path等同RouterModule.forRoot中的配置。

• shouldAttach 若 path 在缓存中有的都认为允许还原路由

• retrieve 从缓存中获取快照，若无则返回null

• shouldReuseRoute

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

RouteReuseStrategy는 2부터 실험적이었고 여전히 오랫동안 신뢰할 수 있을 것입니다.

2. RouteReuseStrategy

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

shouldDetach 경로 재사용 허용 여부

store는 경로가 떠날 때 트리거됩니다. 경로를 저장하세요

< li >

shouldAttach 경로 복원 허용 여부

retrieve 저장된 경로 가져오기

shouldReuseRoute 경로 입력 Trigger, 동일한 경로를 재사용할지 여부

🎜이것은 타임라인 관계처럼 보이지만 현지어로는 다음과 같습니다. 재사용을 허용하도록 /list 경로를 설정합니다( shouldDetach ) 그런 다음 경로 스냅샷을 store에 저장합니다. shouldReuseRoute가 설정되면 /list 경로를 다시 만난 후 표시됩니다. 경로를 재사용하려면 먼저 shouldAttach가 복원을 허용하는지 확인하고 마지막으로 retrieve에서 경로 스냅샷을 가져와 구성요소를 빌드하세요. 🎜🎜이 원리를 이해하면 처음에 검색 목록에서 반환된 문제를 취하면 매우 쉽게 풀 수 있습니다. 🎜🎜3. 예🎜🎜위에서 설명했듯이 경로 활용 전략을 사용자 정의하려면 RouteReuseStrategy 인터페이스만 구현하면 됩니다. 🎜🎜1. 전략을 만듭니다. 🎜

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

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

• 🎜shouldDetach는 모든 경로에 재사용을 허용하려면 true를 직접 반환합니다🎜🎜
• 🎜 store 경로가 떠날 때 발생합니다. 경로를 키로 사용하여 라우팅 스냅샷 및 구성 요소 현재 인스턴스 객체를 저장합니다. 경로는 RouterModule.forRoot의 구성과 동일합니다. 🎜🎜
• 🎜shouldAttach path가 캐시에 있으면 경로 복원이 허용된 것으로 간주됩니다 🎜🎜
• 🎜검색< /code> 캐시에서 스냅샷을 가져옵니다. 그렇지 않은 경우 null을 반환합니다🎜🎜<li>🎜<code>shouldReuseRoute 동일한 경로인지 확인하기 위해 라우팅 트리거를 입력합니다🎜🎜🎜🎜2. 마지막으로 모듈에 전략을 등록합니다.🎜

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

  🎜 다음과 같은 라우팅 구성이 있다고 가정합니다. 🎜rrreee🎜 검색 구성 요소는 검색 작업에 사용되며 검색 결과를 기반으로 편집 페이지로 이동합니다. 마지막 검색 결과 상태(이 부분의 코드를 게시하는 데 관심이 없습니다. plnkr). 🎜🎜4. 결론🎜🎜위 내용은 단순한 소개일 뿐입니다. 사실 스크롤바 위치, 캐시 정리 등 재사용 여부 판단이 더 복잡해집니다. 🎜🎜이 경로 재사용 전략 메커니즘을 잘 활용하면 많은 웹 경험 문제를 해결할 수 있습니다. 🎜🎜🎜🎜🎜🎜🎜

  위 내용은 Angular 라우팅에서 전략을 재사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!