angular项目中遇到的问题

一、angular项目中如何实现路由缓存

需要实现的效果，对请求的数据进行缓存，比如进入文章详情页之后点击返回，不会再调用后台数据接口；而是加载缓存中的数据，如何数据变动的情况下，可使用下拉刷新刷新页面数据。类似于vue的keep-alive效果。

将下列代码保存为app-routing.cache.ts文件并保存在app文件夹下：

import { RouteReuseStrategy, DefaultUrlSerializer, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';
export class AppRoutingCache implements RouteReuseStrategy {public static handlers: { [key: string]: DetachedRouteHandle } = {};// 表示对路由允许复用public shouldDetach(route: ActivatedRouteSnapshot): boolean {// 默认对所有路由复用 可通过给路由配置项增加data: { keep: true }来进行选择性使用，代码如下// if (!route.data.keep) {//   return false;// }return true;}// 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象public store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {AppRoutingCache.handlers[route.routeConfig.path] = handle;}// 若path在缓存中有的都认为允许还原路由public shouldAttach(route: ActivatedRouteSnapshot): boolean {return !!route.routeConfig && !!AppRoutingCache.handlers[route.routeConfig.path];}// 从缓存中获取快照，若无则返回nullpublic retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {if (!route.routeConfig) {return null;}return AppRoutingCache.handlers[route.routeConfig.path];}// 进入路由触发，判断是否同一路由public shouldReuseRoute(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {return future.routeConfig == current.routeConfig;}
}

然后在app.module.ts中添加如下代码：

import { RouteReuseStrategy } from '@angular/router';
import { AppRoutingCache } from './app-routing.cache';

修改app.module.ts中的providers: []为如下：

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

采用以上默认设置，则实现整个项目的缓存，如果我们要进行针对性的缓存，可以在配置路由每项时加一个data: {keep: true}的选项，然后在app-routing.cache.ts打开对应注释掉的代码即可。

二、阻止冒泡事件并传参

 class="right-bottom" (click)="close(item.Id);$event.stopPropagation();">关闭

export class BacklogTaskComponent implements OnInit {close(id){console.log(id);}
}

转载于:https://www.cnblogs.com/1156063074hp/p/10669025.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！