浅谈Angular路由复用策略(2)

定义一个 _cacheRouters 用于缓存数据（路由快照及当前组件实例对象）。

• shouldDetach 直接返回 true 表示对所有路由允许复用
• store 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象；path等同RouterModule.forRoot中的配置。
• shouldAttach 若 path 在缓存中有的都认为允许还原路由
• retrieve 从缓存中获取快照，若无则返回null
• shouldReuseRoute 进入路由触发，判断是否同一路由

2、注册

最后将策略注册到模块当中：

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

假设我们有这么一个路由配置：

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

搜索组件用于搜索动作，并在根据搜索结果跳转至编辑页，保存后又回到最后搜索结果的状态（这部分代码我就不贴有兴趣见 plnkr）。

四、结论

上述只是一个简单的抛砖引玉作用，实则对于复用的判断会更复杂、滚动条位置、缓存清理等等。

善用这种路由复用策略机制可以解决很多Web体验上的问题。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持黑区网络。