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];
  }
  // 从缓存中获取快照，若无则返回null
  public 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打开对应注释掉的代码即可。

二、阻止冒泡事件并传参

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

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